Using this plugin should solve the problem of style changes not taking effect in Chrome Devtools:

https://www.npmjs.com/package/tailwindcss-webpack-plugin

yeah this solution does not work yet with any class with : in the name. So md:grid-cols-2 or dark:text-green etc. Any solutions?

yeah this solution does not work yet with any class with : in the name. So md:grid-cols-2 or dark:text-green etc. Any solutions?

I add in the variants:

{
    pattern: /./,
    variants: ['sm', 'md', 'lg', 'xl', '2xl'],
},

for more infos: :)

https://tailwindcss.com/docs/content-configuration#safelisting-classes

I was having this same issue for rendering grids with Tailwind CSS 3.3 with a React app created with react-create-app and this solved the problem. Here is the safelist I used:

safelist: [ { pattern: /grid-cols-(1|2|3|4)/, variants: ['sm'], }, ]

Thanks a lot for the help!