5 ms·

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 o

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.

Vanderson 5y ago
I found using inline CSS variables and clever use of selectors allows for both media queries and inline to work in harmony.
codyogden 5y ago
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.
- omnimus 5y ago
  Might be best of both worlds if you write JS apps. Not if you write html :)
  - codyogden 5y ago
    The context of this article is about managing CSS in a JavaScript application, so…
teitoklien 5y ago
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
- hanspagel 5y ago
  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/contributors https://github.com/tailwindlabs/tailwindcss/graphs/contribut...
  - adamwathan 5y ago
    Haha correct, I was just explaining why inline styles aren't a suitable alternative to Tailwind. Tailwind can definitely do all that stuff!
    - teitoklien 5y ago
      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.
- deleted 5y ago
  [deleted]
- Kiro 5y ago
  In case the other comment isn't clear: you're replying to the creator of Tailwind.
  - teitoklien 5y ago
    F Amen
deleted 5y ago
[deleted]
johnnypangs 5y ago
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-css/ 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).
- beebeepka 5y ago
  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
elefantastisch 5y ago
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.

Vanderson 5y ago

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

codyogden 5y ago

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.

omnimus 5y ago
Might be best of both worlds if you write JS apps. Not if you write html :)
- codyogden 5y ago
  The context of this article is about managing CSS in a JavaScript application, so…

teitoklien 5y ago

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

hanspagel 5y ago
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/contributors https://github.com/tailwindlabs/tailwindcss/graphs/contribut...
- adamwathan 5y ago
  Haha correct, I was just explaining why inline styles aren't a suitable alternative to Tailwind. Tailwind can definitely do all that stuff!
  - teitoklien 5y ago
    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.
deleted 5y ago
[deleted]
Kiro 5y ago
In case the other comment isn't clear: you're replying to the creator of Tailwind.
- teitoklien 5y ago
  F Amen

deleted 5y ago

[deleted]

johnnypangs 5y ago

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

beebeepka 5y ago
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

elefantastisch 5y ago

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.