The biggest issue with inline styles is you can't use media queries or pseudo-classes like hover, focus, etc, which effectively means you can't build anything of substance with them.
Agree that if inline styles offered all of the features you get when writing your CSS in a stylesheet that it would be a compelling option because of the simplicity, even though the verbosity would be a big knock against.
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.
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.
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
Can we all finally agree then that this is not an issue with modern frontend technology which allows you to componentize your stuff?
Yeah, it was bad when you had a hundred HTML files with repeated elements across them. Updating the style on one such element meant going through all these 100 files.
Nowadays, if you want to change your button background color or your container width size, you should be able to change a single component and have that updated for your whole website.
For me, that kinda fix the main issue people had when they started saying "do css, not inline styles".
I think a big problem with CSS is the assumed best practice of starting with the abstraction / module (stylesheet) instead of starting inline and refactoring out like you’d do when coding in any other language.
It creates paralysis and feels like an upfront chore/ cost. Then naturally it’s hard to maintain because you didn’t know what the right abstraction was yet. You literally end up with everything modular (css files) even if it’s only used once.
I’m really enjoying elm-ui and the principles behind it.
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.
Except you'd be missing out on Tailwind's constraints, which prevent someone like me (with not as much of an eye for design) from accidentally sneaking in little inconsistencies that make a design seem off.
(Like in another comment here, I'm rehashing a more extensive blog post [1] of mine here.)
Why do people prefer Tailwind to Bootstrap (css only)? THey both seem really similar but I've been using Bootstrap so long that I haven't had the impetus to change.
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.
Thanks, that's a really clear answer. Now it's got me scratching my head. I like not having to make a lot of decisions, hence my affinity toward BS. But TW might be worth a spin.
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.
Inline css is very powerful, but tailwind gives you the vast majority of that power with a much smaller learning surface, and with the ability make sweeping style changes without having to update the css in every single component.
Agree that if inline styles offered all of the features you get when writing your CSS in a stylesheet that it would be a compelling option because of the simplicity, even though the verbosity would be a big knock against.