I know you're the creator of Tailwind. However, using emotion’s css() from @emotion/react feels like the best of both worlds. Essentially, writing inline styles but with the ability to do media queries, pseudo classes, and conditional styling based on state. I didn’t like CSS modules, I never quite “got” Tailwind’s functional take on CSS which left me feeling inflexible, but I found something great with emotion and it works wonderfully.

Um you can in tailwind

Its like

md:p-2 which is for m devices , make padding as 2 Or xl:p-4 , which is for xl devices , make padding as 4

Similarly for hover or focus in tailwind its

bg-white hover:bg-black focus:bg-red Which says , by default keep background of this element white , when you hover over it keep it black and when you focus on it , keep it red

Works just fine, Give it a try and go through the docs of tailwind, navigating it using algolia, is a joy :D

I had always heard inline styles were slower and not recommended by browsers. Here is a blog post looking into that:

https://simonadcock.com/are-inline-styles-faster-than-atomic...

In reality the difference wasn’t so big but inline styles might not scale well. (I also realize the original poster might have been sarcastic but it’s a fun to look into even the non serious ideas).

Tailwind also offers curated (and curatable) styles instead of a free-for-all. You can set up Tailwind to exactly provide the levels of spacing, colors, fonts, etc. that you want for your design system. Tailwind is in some ways like inline CSS, but enhanced inline CSS that you can customize the options of precisely for your project/team/company. You don't have to use text-xs, text-sm, text-lg. You can use text-fineprint, text-prose, text-inyourface and configure them to be exactly the size you want. And then of course, you can change the definition of those styles in one place and have it propagate throughout your project. This is where Tailwind starts to move well beyond inline CSS.

I found using inline CSS variables and clever use of selectors allows for both media queries and inline to work in harmony.

This is exactly what I tell people when explaining why I like tailwind. It's very freeing. I mean, I tell them other good things too, but this one is big.

Bootstrap is a fully opinionated framework, tailwind is far more versatile, it has his opinions, but they aren't set in stone in the way that bootstrap is.

You can build bootstrap in tailwind, but you can't build tailwind with bootstrap.

Both are tools to help you design something, but the tradeoffs of each one are quite different.

Bootstrap and Tailwind are very different, though newer versions of Bootstrap do have more utility classes like Tailwind.

Bootstrap provides pre-made visual components, which are useful for getting stuff built quickly but can be a huge pain to tweak (e.g. you want 99% of the styles but just need the padding to be slightly different in one instance).

Tailwind provides no pre-made visual components, but instead provides a sensible design system to keep things consistent, and either a much more pleasant and scalable way to write CSS, or a horrible class soup, depending on your opinion of utility classes.

Author here, most of the non-Tailwind CSS I write is browser-specific tweaks or hacks, and mostly for Safari.