5 ms·

For those complaining about dense HTML using Tailwind, the headline feature of 2.0 should be @apply for everything: https://tailwindcss.com/docs/functions-and-d

For those complaining about dense HTML using Tailwind, the headline feature of 2.0 should be @apply for everything: https://tailwindcss.com/docs/functions-and-directives#apply https://tailwindcss.com/docs/functions-and-directives#apply It lets you move all of those excessive class attributes into your CSS, where it realistically belongs. And that makes your CSS look a little more like CSS. But you get guard rails on it by applying a known set of properties to each rule. It's really the best of all worlds.

cosmotic 6y ago
At that point, what is tailwind offering?
- timdorr 6y ago
  Again, guard rails on those property sets. You are locked into a set of values and they are unlikely to conflict in some odd way. You can also apply configuration changes globally that might affect multiple properties. If you're changing from px to rem for sizing, you can do that without having to go through your entire code base to update that. Or if you need to tweak a color, it's applied everywhere, including computed values (color variants).
  - chrisan 6y ago
    How is that different than Sass with some of the same classes `items-center`, `flex-auto`, `space-x-3` etc?
    - JxLS-cpgbe0 6y ago
      Or the utility classes in Bootstrap?
nfRfqX5n 6y ago
using @apply adds all of those properties and values into a new css class right? you're adding extra lines to your bundle
samuelstancl 6y ago
> It lets you move all of those excessive class attributes into your CSS, where it realistically belongs No. Adam said multiple times that he basically added the feature to make onboarding people smoother. The right way to use Tailwind is to extract components, for example in Vue. That way you have the markup, behavior, and styling in self-contained in a single file, that can be used anywhere, without leaking any internal implementation details.
- fareesh 6y ago
  Can you help me understand the architecture a bit better? I have some reservations. If you extract components then you require JS (low lighthouse score, lots of JS processing on slow devices, likely SEO problems) or SSR to render the page and then serve it (high TTFB) Ideally you would have some kind of build step that can pre-process all the vue components and spit out pre-rendered HTML for all pages but preserve the interactive parts of the component scripts.
  - darekkay 6y ago
    > If you extract components then you require JS Only for interactive components. You can use PHP or a static site generator and create components with no runtime JS at all.
    - fareesh 6y ago
      Yeah I suppose if you use a server-side framework you can use a templating engine to create partials for your components and have a single source of truth that way. I was curious to know if there was a way to do it with just Vue + some build step and pre-rendering
      - darekkay 6y ago
        Not sure about Vue, but in React the simplest thing you could do is to use ReactDOMServer.renderToStaticMarkup(). You can develop your whole "app" in React and then create a JS-less HTML output. There's also Charge [1], a React static site generator with no client-side JavaScript. [1] https://github.com/brandonweiss/charge https://github.com/brandonweiss/charge
rubans 6y ago
Yes but you shouldn't do that really. You should use a view templating system instead to recycle the patterns you spot, e.g. button.tpl would contain the abstraction of classes. The moment you collapse the classes in to a single class you're back to square one and the reason functional CSS arose be first place. Adam Wathan promotes this pattern himself in this video. https://youtu.be/J_7_mnFSLDg https://youtu.be/J_7_mnFSLDg
wishinghand 6y ago
> It lets you move all of those excessive class attributes into your CSS If only CSS had thought to include such a feature.
- rvense 6y ago
  Yeah, Tailwind uses postcss to let you use its utility classes with the normal way of doing abstractions in CSS - but it also promotes using Javascript component frameworks where that makes sense. The utility classes are in themselves great. It's a complete set but it still promotes thinking in design systems. CSS classes are good, but should be used in moderation. Since you're likely using a component framework anyway, you can often just use the utility classes directly in your components with no loss of clarity and without repeating yourself. But when you do end up repeating yourself in the CSS, you can reach for postcss's @apply and have access to Tailwind's design system. The three levels work extremely well together.

cosmotic 6y ago

At that point, what is tailwind offering?

timdorr 6y ago
Again, guard rails on those property sets. You are locked into a set of values and they are unlikely to conflict in some odd way. You can also apply configuration changes globally that might affect multiple properties. If you're changing from px to rem for sizing, you can do that without having to go through your entire code base to update that. Or if you need to tweak a color, it's applied everywhere, including computed values (color variants).
- chrisan 6y ago
  How is that different than Sass with some of the same classes `items-center`, `flex-auto`, `space-x-3` etc?
  - JxLS-cpgbe0 6y ago
    Or the utility classes in Bootstrap?

nfRfqX5n 6y ago

using @apply adds all of those properties and values into a new css class right? you're adding extra lines to your bundle

samuelstancl 6y ago

> It lets you move all of those excessive class attributes into your CSS, where it realistically belongs No. Adam said multiple times that he basically added the feature to make onboarding people smoother. The right way to use Tailwind is to extract components, for example in Vue. That way you have the markup, behavior, and styling in self-contained in a single file, that can be used anywhere, without leaking any internal implementation details.

fareesh 6y ago
Can you help me understand the architecture a bit better? I have some reservations. If you extract components then you require JS (low lighthouse score, lots of JS processing on slow devices, likely SEO problems) or SSR to render the page and then serve it (high TTFB) Ideally you would have some kind of build step that can pre-process all the vue components and spit out pre-rendered HTML for all pages but preserve the interactive parts of the component scripts.
- darekkay 6y ago
  > If you extract components then you require JS Only for interactive components. You can use PHP or a static site generator and create components with no runtime JS at all.
  - fareesh 6y ago
    Yeah I suppose if you use a server-side framework you can use a templating engine to create partials for your components and have a single source of truth that way. I was curious to know if there was a way to do it with just Vue + some build step and pre-rendering
    - darekkay 6y ago
      Not sure about Vue, but in React the simplest thing you could do is to use ReactDOMServer.renderToStaticMarkup(). You can develop your whole "app" in React and then create a JS-less HTML output. There's also Charge [1], a React static site generator with no client-side JavaScript. [1] https://github.com/brandonweiss/charge https://github.com/brandonweiss/charge

rubans 6y ago

Yes but you shouldn't do that really. You should use a view templating system instead to recycle the patterns you spot, e.g. button.tpl would contain the abstraction of classes. The moment you collapse the classes in to a single class you're back to square one and the reason functional CSS arose be first place. Adam Wathan promotes this pattern himself in this video. https://youtu.be/J_7_mnFSLDg https://youtu.be/J_7_mnFSLDg

wishinghand 6y ago

> It lets you move all of those excessive class attributes into your CSS If only CSS had thought to include such a feature.

rvense 6y ago
Yeah, Tailwind uses postcss to let you use its utility classes with the normal way of doing abstractions in CSS - but it also promotes using Javascript component frameworks where that makes sense. The utility classes are in themselves great. It's a complete set but it still promotes thinking in design systems. CSS classes are good, but should be used in moderation. Since you're likely using a component framework anyway, you can often just use the utility classes directly in your components with no loss of clarity and without repeating yourself. But when you do end up repeating yourself in the CSS, you can reach for postcss's @apply and have access to Tailwind's design system. The three levels work extremely well together.