ElianCodes

← Back to blog

Published on 02/16/2021 19:13 by Elian Van Cutsem

Using Sass as a tailwindCSS preprocessor

Today I fiddled around with Tailwind @apply classes. I previously posted about a darkmode in combination with @apply classes and damn it goes well together. But I discovered a problem and got stuck on it for a while. It seems that when you’re using tailwind without PostCSS 8, it doesn’t compile the nested classes. So I searched for a fix.

It seems that the TailwindCSS documentation has a page dedicated to this and it solves the problem in an ideal situation. But the codebase I used didn’t use Postcss, so I had to find a workaround.

Ideal solution

the ideal solution is actually very clean and simple, just require the postcss-import and postcss-nesting packages in the postcss.config.js file. like so:

module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("postcss-nested"), // or require('postcss-nesting')
    require("autoprefixer"),
  ],
};

Very simple, very nice. But how to fix it when you’re not using PostCSS (yet) ?

Describing the setup

In the project I was working in, we’re using a webpack / babel setup with minifyCSS to compile the CSS into the production environment. To change the whole system was probably going to take a while and to be honest I didn’t write that code and didn’t feel certain that everything was going to work. I searched around for a bit on the documentation of PostCSS and tought of a fix on how it possibly could work.

How to fix

I tought of a way to just compile the tailwind.scss file into a compiled tailwind.css file with of course the compiled nested classes. To do this I basically installed the postcss-cli NPM package. and configured the build scripts in package.json to compile Tailwind

// package.json
"scripts": {
    "build:tailwind": "postcss ./assets/css/tailwind.scss -o public_html/assets/css/tailwindoutput.css",
    "watch:tailwind": "postcss ./assets/css/tailwind.scss -o public_html/assets/css/tailwindoutput.css --watch"
  },

out of the box this does work for the basics, but still the nested classes were not working, so I now could follow the documentation and add the plugins to the postcss.config.js

//postcss.config.js
module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("autoprefixer"),
    require("postcss-nested"),
  ],
};

Now everything finally worked fine and I could use nested classes!

/* tailwind.scss */
@tailwind base;
@tailwind components;
@tailwind utilities;

.header {
  @apply text-gray-600 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-50;
  nav {
    @apply hover:text-green-800;
  }
}

Written by Elian Van Cutsem

← Back to blog
  • So, I'm leaving vBridge

    So, I'm leaving vBridge

    After spending a couple of years at vBridge Cloud, I'm leaving the company. I've worked at vBridge eversince I graduated. Now, It's time for a new adventure! I'm joining the DX-team at Astro full-time!

  • Becoming an Astro maintainer

    Becoming an Astro maintainer

    Since a week, I'm an Astro maintainer, in this post, I describe the process and my start in open source. I also give some insight in what I'm planning to work on.

  • 🍱 Brutal: A theme for Astro

    🍱 Brutal: A theme for Astro

    Brutal is a minimal neobrutalist theme for Astro. It's based on Neobrutalist Web Design, a movement that aims to create websites with a minimalistic and functional design. It has some integrations like Image Optimization, RSS, Sitemap, ready to get your SEO done right.

  • 🎤 Am I an international public speaker now?

    🎤 Am I an international public speaker now?

    A few weeks ago, I gave my first international keynote talk at JSWorld in Amsterdam. In this blogpost, I wanted to share some insights about the conference and my talk.

  • ✨ Building Blog tag index pages in Astro

    ✨ Building Blog tag index pages in Astro

    I wanted to add blog tag collection pages to my website. This way, people could filter on tags I used in my blog posts. Here is a guide on how I implemented it.

  • 🎉 I started from scratch (again)

    🎉 I started from scratch (again)

    I started rebuilding my personal website from scratch in Astro again, no dependencies, no frameworks, no nothing. This to decrease technical debt and make full use of the newer Astro features.