4 ms·

Any time spent learning tailwind is much better invested in learning plain CSS, since it's basically just syntactic sugar for style attributes. And learning CSS

Any time spent learning tailwind is much better invested in learning plain CSS, since it's basically just syntactic sugar for style attributes. And learning CSS itself will be useful for many years to come, well beyond the lifetime of any given framework. The browser's built-in CSS support is the framework, I don't understand why people try to build things like this on top of it unless they're adding real value.

pocketsand 4y ago
It's really not just syntatic sugar for style. It's a design system as well as a set of utility classes. Consider the difference between <span style="color: #cccccc">Gray text</span> and <span class="text-gray-700">Gray text</span> In the former, you can't just redefine what gray means. You've hard set it to a value you need to keep track of and keep consistent. On the right, you can configure what "700" means, switch between a cool gray or a blue gray, etc.
- jakelazaroff 4y ago
  So use a custom property instead (don’t use inline styles tho): <span style=“color: var(--text-gray-700)”>Gray text</span> Or use Sass or something. This problem has been solved for like 15 years.
  - hbn 4y ago
    I want the styles to be in the template though, because I don't want to bounce back and forth between 2 files when designing a single UI. And it's not just inline styles, there's some things Tailwind can do that a style tag can't. Such as screen size breakpoints. Here's how to make a div have 0.5rem of left/right padding on mobile, and 2rem on any screen larger: <div class="px-2 sm:px-8"> I'd much rather do this than mess with CSS's horrible media query syntax myself. And when I come back to this later, I don't have to cross-reference between (probably badly named) classes across 2 files to figure out how that div behaves.
    - jakelazaroff 4y ago
      Okay, but now we’re back to Tailwind being back to syntactic sugar for styles (you can definitely put media queries in a style tag). I disagree with your preference; all the classnames are not easily parseable and obscure the markup, and I much prefer the CSS media query syntax. But that’s, like, just my opinion, man. If you like it better, don’t let me stop you!
      - skttl 4y ago
        >(you can definitely put media queries in a style tag) How?
        jakelazaroff 4y ago
        <style>@media (min-width: 100px) {}</style>
  - azemetre 4y ago
    This is what tailwind does already. Colors are defined as design tokens in a config file: https://tailwindcss.com/docs/customizing-colors#color-object-syntax https://tailwindcss.com/docs/customizing-colors#color-object... Utility CSS is by far my favorite way to write CSS, especially in teams. It allows you to extract out multiple classnames that encapsulate all styles into a single classname. Why would you use Sass when plain CSS does the job better? Tailwind is just normal CSS, all the build steps are ways of making your stylesheets more efficient and removing dead code but it's all still CSS no preprocessor necessary.
- my80thaccount 4y ago
  Those are both just opaque values, if you wanted to gsub them it would be exactly the same.
brightball 4y ago
But it does add real value. Aside from creating a standard naming scheme for your style guide, they also simplify specific CSS tag features by ensuring they can be consistent across browsers without you having to tweak each style. Outside of that, they acknowledge that you're not going to use custom CSS tags that often because 9 times out of 10 you're going to style something in one place in a template and your programming language will repeat it for you...so there's no real value to creating a dedicated class. Another that I've found over the lifecycle of a project is that developers forget what CSS is where and end up simply creating new classes for things that they need rather than trying to reuse existing ones...which leads to your CSS growing constantly over time. With Tailwind I rebuilt my entire personal site, brightball.com and ended up with 20 lines of custom CSS. This after restyling the entire site and making it responsive. And I was able to do all of it in an afternoon without ever having even made a responsive site before. What they've done is created "Rails for Style Guides" and it works beautifully. The Refactoring UI book (fast read) from the authors of Tailwind goes into the importance and reasoning for everything they do and it makes absolutely perfect sense. https://www.refactoringui.com/ https://www.refactoringui.com/

pocketsand 4y ago

It's really not just syntatic sugar for style. It's a design system as well as a set of utility classes. Consider the difference between <span style="color: #cccccc">Gray text</span> and <span class="text-gray-700">Gray text</span> In the former, you can't just redefine what gray means. You've hard set it to a value you need to keep track of and keep consistent. On the right, you can configure what "700" means, switch between a cool gray or a blue gray, etc.

jakelazaroff 4y ago
So use a custom property instead (don’t use inline styles tho): <span style=“color: var(--text-gray-700)”>Gray text</span> Or use Sass or something. This problem has been solved for like 15 years.
- hbn 4y ago
  I want the styles to be in the template though, because I don't want to bounce back and forth between 2 files when designing a single UI. And it's not just inline styles, there's some things Tailwind can do that a style tag can't. Such as screen size breakpoints. Here's how to make a div have 0.5rem of left/right padding on mobile, and 2rem on any screen larger: <div class="px-2 sm:px-8"> I'd much rather do this than mess with CSS's horrible media query syntax myself. And when I come back to this later, I don't have to cross-reference between (probably badly named) classes across 2 files to figure out how that div behaves.
  - jakelazaroff 4y ago
    Okay, but now we’re back to Tailwind being back to syntactic sugar for styles (you can definitely put media queries in a style tag). I disagree with your preference; all the classnames are not easily parseable and obscure the markup, and I much prefer the CSS media query syntax. But that’s, like, just my opinion, man. If you like it better, don’t let me stop you!
    - skttl 4y ago
      >(you can definitely put media queries in a style tag) How?
      - jakelazaroff 4y ago
        <style>@media (min-width: 100px) {}</style>
- azemetre 4y ago
  This is what tailwind does already. Colors are defined as design tokens in a config file: https://tailwindcss.com/docs/customizing-colors#color-object-syntax https://tailwindcss.com/docs/customizing-colors#color-object... Utility CSS is by far my favorite way to write CSS, especially in teams. It allows you to extract out multiple classnames that encapsulate all styles into a single classname. Why would you use Sass when plain CSS does the job better? Tailwind is just normal CSS, all the build steps are ways of making your stylesheets more efficient and removing dead code but it's all still CSS no preprocessor necessary.
my80thaccount 4y ago
Those are both just opaque values, if you wanted to gsub them it would be exactly the same.

brightball 4y ago

But it does add real value. Aside from creating a standard naming scheme for your style guide, they also simplify specific CSS tag features by ensuring they can be consistent across browsers without you having to tweak each style. Outside of that, they acknowledge that you're not going to use custom CSS tags that often because 9 times out of 10 you're going to style something in one place in a template and your programming language will repeat it for you...so there's no real value to creating a dedicated class. Another that I've found over the lifecycle of a project is that developers forget what CSS is where and end up simply creating new classes for things that they need rather than trying to reuse existing ones...which leads to your CSS growing constantly over time. With Tailwind I rebuilt my entire personal site, brightball.com and ended up with 20 lines of custom CSS. This after restyling the entire site and making it responsive. And I was able to do all of it in an afternoon without ever having even made a responsive site before. What they've done is created "Rails for Style Guides" and it works beautifully. The Refactoring UI book (fast read) from the authors of Tailwind goes into the importance and reasoning for everything they do and it makes absolutely perfect sense. https://www.refactoringui.com/ https://www.refactoringui.com/