I’m warming to Tailwind CSS

— 2 minute read

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.

Hi 👋, I’m Andy — an educator and web designer

I produce front-end development tutorials over at Front-End Challenges Club and Piccalilli. You can sign up for updates on Piccalilli to stay up to date with its progress.

Sign up for updates