All In On Tailwind
Published almost 2 years ago • 2 min read
Where I eschew all CSS files and put everything into Tailwind's config file.
I'm a huge fan of Tailwind if you didn't already know. I also just love plain old CSS. I actually think CSS is the most interesting part of web development, to tell you the truth. But this site actually doesn't contain even a single CSS file in its source code. By using the provided default Tailwind CSS files as Webpack imports through my Gridsome/Tailwind plugin, I'm able to pull in all of that initial Tailwind stuff without the usual…
@tailwind base;
@tailwind components;
@tailwind utilities;
…boilerplate that the Tailwind docs tell you to include in your project.
All of my base styles, globally-used components, and site-wide utilities are
declared in tailwind.config.js and then all my global stuff is kept there,
with the full power of JavaScript available to manipulate things, without the
need for a pre-processor language like Sass or Less. Sure, I'm using PostCSS,
but any monkeying I do with the CSS is done with JavaScript, which is far more
standard (and powerful) than any pre-processor language. Of course, I can still
include one-off components in Vue script tags in my components if need be,
but it removes one more thing from the pipeline, which seems like a good thing
to me.