Force tailwind to compute scss once for all in dev environment

Viewed 21

I am putting Tailwind in an Angular project. I have what I think is the most standard configuration (default one, only changed the colors) :

tailwind.config.js

module.exports = {
  content: [
    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname),
  ],
  theme: { 
    [...]
  },
  plugins: [],
}

Yet, I face problems when I use a CSS class for the first time. For example mt-10.

It seems that tailwind uses the glob pattern to detect the used css properties and create a CSS on the flight when the server starts. Is that correct ?

If I understand it correctly, it seems to make sense in order to avoid having a huge CSS file with tons of properties that are not used.

But it means that if I don't use this class at the moment I start the server, then it won't be available after a live reload. If I want to use a css class for the first time, it seems that I have to restart the server to have it detected before being able to use it, which is irritating.

Is it possible to deactivate this behavior in development ? It seems to me that it should be possible to build the huge CSS once for all in dev. Is there an option for that ?

0 Answers
Related