Updating to tailwind 3 enabled purging on local development

[Lestat86]

Sorry, since i haven't received any answer and this is considerably slowing me down, i'll try to make it an issue...
TL;DR: Tailwind 3 is purging styles even in local development, and this is preventing me to quick style components in the inspector tab without reloading the code. Tailwind 2 was working fine.

Discussed in #7014

^{Originally posted by Lestat86 January 11, 2022}
Hi everyone,

i just updated to tailwind 3 (was using 2) my nextjs app, and i noticed that my styles get purged on local development. Let me give you an example: if i open up a page and want to try quick style changes on an element, previously i could've just added the classes directly from the devtools (for example mr-2). Now i can only add classes that i already used in that page - in order to add a new class i have to change the original source.

I'm using nextjs 12, i've tried both on chrome and firefox. I checked the NODE_ENV variable and it is development, as it was previously...

One thing i'd like to add is that even though i'm developing locally, i changed my host file to use a particular hostname instead of localhost:3000 (i.e. my-site.com:3000). This hasn't been a problem before.

I'm including my tailwind config, which i changed during the migration process: maybe i might've made a mistake there? (although it is very basic)

Thanks!

module.exports = {
  content:  [ './pages/**/*.{js,jsx}', './components/**/*.{js,jsx}' ],
  safelist: [ 'w-7', 'h-7' ],
  theme:    {
    extend: {}
  },
  plugins: [
    require('@tailwindcss/line-clamp')
  ]
};

[adamwathan]

Hey! This is how Tailwind 3 works, it uses a new engine that generates only the styles you need and there's no way to generate a "full" build as we did in v2. See this thread for more discussion on the topic:

#6256

If you really find yourself needing the ability to tweak things in dev tools, you might want to consider this tool:

https://devtoolsfortailwind.com/

Personally I haven't found it to be a problem as long as you're using a dev server with hot reloading features — I just make the changes in my actual code instead of in the dev tools.

[vincerubinetti]

See this discussion thread for a solution:
#6557

Basically: safelist: process.env.NODE_ENV === "development" ? [{ pattern: /.*/ }] : []

A note to the devs, this really would be a good feature to build in. There are legitimate use cases. For example, in my case, I'm building a jekyll site with tailwind. Since it is very inconvenient to run both the tailwind --watch option and the jekyll serve watch option at the same time, I'm relying on the above method to include all the styles for development.