Hacker News Reader

Comment by adamwathan | Hacker News Reader

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.

View on HN

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.

Might be best of both worlds if you write JS apps. Not if you write html :)

The context of this article is about managing CSS in a JavaScript application, so…

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).

Ha, truth is, inline styles are actually faster, not slower. The bigger your CSS files grow, the faster inline becomes.

I feel not enough people have experience with low power devices

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.

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 think Adam knows what’s possible with Tailwind CSS [1], but wanted to point out that it’s not possible with just a style attribute. :-)

[1] https://github.com/tailwindlabs/tailwindcss/graphs/contribut...

Haha correct, I was just explaining why inline styles aren't a suitable alternative to Tailwind. Tailwind can definitely do all that stuff!

Thanks a lot for making tailwind ! Haha i didnt check the username before replying, sorry xD

Your project is the reason why i like building web interfaces again.

In case the other comment isn't clear: you're replying to the creator of Tailwind.

F Amen

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

Reply on news.ycombinator.com