A new way to build CSS frameworks with… TailwindCSS?

TailwindCSS has a great color scheme, good default styles, a way to remove unused classes, a way to make custom classes, and lots more. It would be the greatest thing if we could use its styles to make our own CSS frameworks. Guess what, we can!

I hav…

TailwindCSS has a great color scheme, good default styles, a way to remove unused classes, a way to make custom classes, and lots more. It would be the greatest thing if we could use its styles to make our own CSS frameworks. Guess what, we can!

I haven’t done it yet, but the main steps look like so:

  • Use tailwind’s @apply to create your classes
  • Create an HTML file (which will be used for purging unused classes)
  • Run Tailwind (using PostCSS or whatever)

That’s it! You will get a new CSS file with your framework ready to use.

There are a few more things you could try:

  • Wanna use any of tailwind’s built-in classes? Just add the classes to any elements in the HTML file I mentioned before, and they won’t be removed from the CSS!
  • Dig into the tailwind config files to get more stuff like dark mode, custom color schemes, plugins, and more!
  • You got more ideas? Comment them down below!

I think this is the same approach that tailwindui is using.


Print Share Comment Cite Upload Translate
APA
Siddharth | Sciencx (2024-03-29T10:22:21+00:00) » A new way to build CSS frameworks with… TailwindCSS?. Retrieved from https://www.scien.cx/2021/06/21/a-new-way-to-build-css-frameworks-with-tailwindcss/.
MLA
" » A new way to build CSS frameworks with… TailwindCSS?." Siddharth | Sciencx - Monday June 21, 2021, https://www.scien.cx/2021/06/21/a-new-way-to-build-css-frameworks-with-tailwindcss/
HARVARD
Siddharth | Sciencx Monday June 21, 2021 » A new way to build CSS frameworks with… TailwindCSS?., viewed 2024-03-29T10:22:21+00:00,<https://www.scien.cx/2021/06/21/a-new-way-to-build-css-frameworks-with-tailwindcss/>
VANCOUVER
Siddharth | Sciencx - » A new way to build CSS frameworks with… TailwindCSS?. [Internet]. [Accessed 2024-03-29T10:22:21+00:00]. Available from: https://www.scien.cx/2021/06/21/a-new-way-to-build-css-frameworks-with-tailwindcss/
CHICAGO
" » A new way to build CSS frameworks with… TailwindCSS?." Siddharth | Sciencx - Accessed 2024-03-29T10:22:21+00:00. https://www.scien.cx/2021/06/21/a-new-way-to-build-css-frameworks-with-tailwindcss/
IEEE
" » A new way to build CSS frameworks with… TailwindCSS?." Siddharth | Sciencx [Online]. Available: https://www.scien.cx/2021/06/21/a-new-way-to-build-css-frameworks-with-tailwindcss/. [Accessed: 2024-03-29T10:22:21+00:00]
rf:citation
» A new way to build CSS frameworks with… TailwindCSS? | Siddharth | Sciencx | https://www.scien.cx/2021/06/21/a-new-way-to-build-css-frameworks-with-tailwindcss/ | 2024-03-29T10:22:21+00:00
https://github.com/addpipe/simple-recorderjs-demo