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.
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.