Posts tagged #tailwind

Compound Colour Utilities with TailwindCSS

by Liam Hammett · 5 minute read · #tailwind

When creating UIs with TailwindCSS, I often find myself writing the same few utilities together on the same elements all the time. This is why I often end up composing some common components, like a .button and .form-input classes.

In my mind, however, a “component” is a fully-formed set of styles for an element - something like a button may affect the colours, padding, border radius, text size and more - styles that are not necessary to be coupled together to still have a usable element.

But what do you do if you want to modify something that’s tightly coupled together, like the colours? If your default element has black text and you set a dark background utility, you probably don’t want it to keep having black text - coupling another text-colour utility to it.

Read more…

Laravel TALL Stack Preset

by Liam Hammett · 3 minute read · #laravel #tailwind #alpinejs #livewire

Do you enjoy using TailwindCSS, AlpineJS, Laravel and Livewire together?

Well you’re in luck! Along with Dan Harrin and Ryan Chandler, we’ve just released a preset that can provide all of this out-of-the-box with sensible defaults to get you up and running with these technologies in a flash.

Read more…

TailwindCSS <details> plugin

· #open-source #tweet #tailwind

I built a nice looking and fully accessible dropdown menu by using the native <details> HTML tag without a drop of JavaScript in the client.

To build it in a utility-first approach, I created a simple plugin for TailwindCSS.

You can find the plugin over at GitHub.