👀 DEMO: https://cube-css-with-tailwind.netlify.app/ 👀
📝 MORE INFO I wrote up about this whole thing here
An example of how you can use Tailwind CSS as the U (utilities) in CUBE CSS. It also uses the following:
- Every Layout layouts as compositional layouts (the C in CUBE CSS)
- Utopia for fluid type and spacing scales
- Post CSS to bundle up CSS files
I work with clients that like to use Tailwind and I, as part of the consultancy work I do, try to encourage them down the path of a CSS methodology, rather than leaning all-in on a CSS framework.
Tailwind is fantastic at generating utility classes with an easy-to-understand config file, but I find it very limiting and rigid as the entire CSS codebase, so this project uses it how I would ideally use it: purely as the utility generator.
Consider this project diplomacy.
- Run
npm install
- Run
npm start
to spin up a little local server and watch for CSS changes - Run
npm build
to compress CSS etc
No thanks, but if you see something fundamentally wrong (not just your opinions, thanks), then let me know in the issues!