Tailwindcss: Adding new class-sets

[smbdelse]

Hi! First, kudos to Tailwindcss team. It's definitely the game changer.
The closest topic I found on this subject was:
https://github.com/tailwindcss/tailwindcss/issues/102

It would be great to be able to use Tailwind mechanisms to generate own class-sets, with ability to customize them in settings. Here is an example of set that could be customized through settings file:

.text-shadow,
.hover\:text-shadow:hover {
  text-shadow: 0px 0px .4px rgba(#010, .3);
}
.text-shadow1,
.hover\:text-shadow1:hover {
  text-shadow: 0px 0px .6px rgba(#010, .3);
}
.text-shadow2,
.hover\:text-shadow2:hover {
  text-shadow: .2px .5px 1px rgba(#010, .3);
}
.text-shadow3,
.hover\:text-shadow3:hover {
  text-shadow: 1px 2px 2px rgba(#010, .3);
}

edit:
As I see now it would need to be added as some kind of plugins, so it's not as straightforward as one could suppose. And couldn't be implemented without providing proper documentation.

[reinink]

Hey there @smbdelse! Thanks so much for your interest in Tailwind and kind words. ❤️

Using the Tailwind config as a single place to define and generate all utilities is something we briefly considered, but ultimately decided against.

Put simply, we didn't want to discourage Tailwind users from actually writing CSS. Just because Tailwind generates most of the CSS you need to build a website, doesn't mean you'll never need to write you own. Sometimes you'll need utilities that aren't provided by Tailwind. Other times you'll maybe need to do something complex with child selectors that isn't practical to do with utilities. And of course, you may want to create components for repeating patterns. These are all best done in CSS, and we've provided tools to help you do this. See

• Adding New Utilities
• Extracting Components

So, for your example above, I'd recommend creating this CSS:

@responsive {
  @hoverable {
    .text-shadow { text-shadow: 0px 0px .4px rgba(#010, .3) }
    .text-shadow1 { text-shadow: 0px 0px .6px rgba(#010, .3) }
    .text-shadow2 { text-shadow: .2px .5px 1px rgba(#010, .3) }
    .text-shadow3 { text-shadow: 1px 2px 2px rgba(#010, .3) }
  }
}

I hope that helps! :metal:

[reinink]

A note: we haven't actually documented @hoverable yet, mostly because we're not sold on that naming yet. You can of course use it, just be aware that it might change.

[smbdelse]

That's great! I'm absolutely amazed on how customizable and flexible Tailwind is. Also thanks to it's structure and logic, it's really easy to keep projects clean and solid. Thanks again for your work guys!