Closed Darkle closed 11 months ago
Can you not point the provider to https://cdn.tailwindcss.com/3.3.5 (even though you then won't have access to your custom styles based on tailwind)?
Yeah that's definitely a simpler option if you have no custom styles.
So this is weird, but I have recently found that if I just change the content to:
content: ['./public/**/*.{mjs,html}', './fs/**/*.fs'],
it works fine on its own.
Hi, I thought I might post my approach to using the latest tailwind css with TypedCssClasses since things have changed in the latest version of tailwind. I thought others might benefit from this.
So the latest tailwind version isn't distributed as a complete file anymore. It now has a "just-in-time" compilation to help prevent shipping all the tailwind classes in order to minimize the .css file size. This of course is a problem for TypedCssClasses as it needs to read the classes from a .css file.
My approach is to use javascript in the tailwind config file to dynamically get all the tailwind classes from the .fs files and add it to the tailwind config
safelist
property - thesafelist
property makes sure to include the classes listed, which means TypedCssClasses can then pick it up in the file the tailwind cli outputs.Here is my
tailwind.config.cjs
file:Note:
tw.
comes from one of my .fs files:type tw = CssClasses<"public/css/build.css", Naming.Verbatim>
The only problem with this approach is that when I add new tailwind classes to my .fs files, the
tailwind.config.cjs
is already cached and wont run again. I get around that by using a watcher program to re-run the tailwind cli, which will in-turn re-load its config file. The only small down side is that it is slightly less performant than runningtailwind --watch
as it adds anywhere from 100-200 milliseconds to the build time as you are re-running the tailwind cli from scratch.I chose nodemon as the watcher program, but you could use another watcher program:
All up it may take 1-3 seconds for vscode to be updated when you add a tailwind class that has not yet been added to the css. This isn't as bad as it sounds as once you get going, you'll find you don't add many new tailwind classes that you have never used before.
Also, you may need to save a second time in vscode after a second to remove the red squiggly line.
I hope all that makes sense. :-)