Migrating to TailwindCSS, iteratively, in your Drupal theme

I’m a huge fan of TailwindCSS. After using it, I find writing media queries for responsive interfaces complicated instead of leveraging the responsive variants of Tailwind. Not to mention I can stop fretting over the naming of my classes to ensure I meet my own made-up SMACSS/BEM standard.

I am migrating my personal site to use Tailwind. The current version isn’t anything fancy, it’s mostly vanilla CSS, but I pass it through PostCSS for some cleanup via Gulp.

My new setup: Tailwind with purging compiled via Laravel Mix.

I have some things moved over to Tailwind right now and could preserve the existing styling while ripping some things out.

If you find this interesting!

How I added Tailwind & Laravel Mix to my theme

In my theme, I ran the following commands. I’m going to be brief here as all of these were gathered from the respectful tool’s documentation.

cd web/themes/custom/mglaman
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npm install -D laravel-mix

npx tailwindcss init
touch webpack.mix.js

This installed my dependencies and provided the base configuration files.

Here are my NPM scripts

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "mix --production",
    "dev": "mix",
    "watch"…