I’m warming to Tailwind CSS

We’re using Tailwind CSS to handle our design tokens in the current project I’m on and I’ve gotta say, I am digging it.

Example permalink

Working with colours is probably is simplest example to share. I’ve got some config like this in tailwind.config.js:

const colors = {
  primary: '#ff00ff',
  secondary: '#efefef'
}

Then in my CSS file, thanks to PostCSS, I can do this:

:root {
  --color-primary: config('colors.primary');
  --color-secondary: config('colors.secondary');
}

This also becomes super useful when I want to share colour information with JavaScript, which in this project’s context, where I’m working with Chart JS, I can do stuff like this:

import { colors } from '../tailwind.config.js';

// I could use it however I wanted now and it'll be in sync with CSS
const primaryColor = colors.primary;

This to me feels like a good balance of using CSS for what’s it’s good for, using JavaScript for what it’s good for and using light pre(post?)-processing to unify the two, where necessary.