All of my published content
I'm a recent convert to Tailwind CSS after using styled-components for years. Tailwind has a different approach to reusing styles, but acknowledges that creating reusable components makes sense for certain use cases. Here I will demonstrate 3 examples of a reusable component, created with React and TypeScript, and styled with Tailwind utility classes using props, clsx, and cva, respectively.
It's possible to use the `theme` function within arbitrary values to reference the design tokens in your `tailwind.config.js` file.
There's a more flexible way to customize your color palette in Tailwind CSS beyond the advice given in their documentation. You can already define custom colors using CSS variables in Tailwind while preserving the opacity modifier syntax, however this method also allows you to easily use the built-in Tailwind colors.
Things to consider when creating your own custom classes in Tailwind CSS.
Many utilities in Tailwind share a common namespace but map to different CSS properties. When using arbitrary values, Tailwind can generally handle this ambiguity but sometimes needs a hint.
When an arbitrary value needs to contain a space, use an underscore instead and Tailwind will automatically convert it to a space at build-time.
You can customize which `aria-*` modifiers are available by editing your theme. ARIA state modifiers can also target parent and sibling elements.
Tailwind will only find classes that exist as complete unbroken strings in your source files. If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS
Unstyled lists are not announced as lists by VoiceOver. If your content is truly a list but you would like to keep it unstyled, add a “list” role to the element.