Don't use arbitrary values in Tailwind CSS
It's been almost five years since I gave the first version of my "Taking Flight with Tailwind CSS" talk at the Drupal Bristol meetup in January 2018.
It's a talk that I've updated every time I've given it, showing new rebuilt example UIs and the new features in the framework, as well as tweaking content like installation steps for different audiences.
As I prepare for the Norfolk Developers Conference (nordevcon) next month, I'm updating the talk again.
One feature that wasn't in the last version of the talk is arbitrary values in class names. This, I think, is an antipattern and something that I avoid using.
Whilst you could always add arbitrary values in custom CSS, one of my original reasons for liking and adopting Tailwind CSS was that there was a predefined list of classes to choose from.
A set list of colours, text sizes, margins and padding, for example, meant that UIs looked more consistent and the generated CSS was smaller.
If you need an additional value or to replace the existing values, you can do so within your tailwind.config.js file, and Tailwind will generate classes accordingly.
Whilst writing custom CSS, inline styles, and arbitrary values are all possible, I'd suggest using the configuration file, generating the classes that you need, and sticking to them as much as you can and enjoying the consistency and benefits that brings.
- Oliver
P.S. If you're creating a new Drupal module, try my free Drupal module template.
