Pre-build all (including unused) tailwind classes in dev

user_5090346 0
Viewed 512

I would like to build all tailwind classes immediately with yarn in development so I have them all pre-built.

Why?

My problem is this:

I am "doing frontend" in my Laravel project as good as I can and am trying out all these different classes from tailwind. It seems to me that only the tailwind classes that are used in the project gets built on yarn run (or at start with yarn watch). This leads to a problem when I have my yarn watch active. As yarn watch only watches my scss files, and not my blades, it does not trigger a build when I add a novel tailwind class to a blade file. Hence I need to manually close the watch and restart it each time I use a novel class.

A solution that I am grasping for would be to, in dev, pre-build every tailwind class, even the so far unused ones. How could that be done?

tailwind-css laravel
1 Answers

Use the safelist option in the tailwind.config.js file. That option is designed to generate classes even if the classes cannot be found in the html files listed in your content path of that config file. The fun thing is that safelist accepts regex patterns so you can just throw in .* and you should get everything.

I just tried and it appeared to work. The resulting css file is 45,292 lines long and contains every tailwind class I've ever seen.

module.exports = {
  content: ["./src/**/*.{html,js}"],
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  safelist: [
    {
      pattern: /.*/
    }
  ]
}
user_58926060
Related