3 ms·

Tailwind is the modern equivalent of Bootstrap. Most teams do not have a dedicated designer. Most developers are quite bad at CSS. These teams, which are most

Tailwind is the modern equivalent of Bootstrap. Most teams do not have a dedicated designer. Most developers are quite bad at CSS. These teams, which are most teams, want to ship something that is not butt-ugly and do it fast. That's what Bootstrap did and what Tailwind does. All the endless discussions about the technical merit of inlining utility classes versus hand-crafting CSS are pointless and cannot be resolved because they miss the point entirely. The point is: ship something good-looking very fast by people that suck at UI or don't have proper time for it.

butz 3y ago
Bootstrap is still here. Tailwind CSS just gives more freedom, and no elements out of the box - you have to do it yourself. Both are great tools to build a landing page or a website fast.
savanaly 3y ago
I don't think this is right at all. Tailwind comes with no opinions about your styles other than their default units of length (p-1, p-2, p-3) having a set REM scaling. Perhaps you're thinking of e.g. DaisyUI [0]? Or some other CSS framework built on Tailwind? [0] https://daisyui.com/ https://daisyui.com/
- arxpoetica 3y ago
  The default REM scaling is one of my main gripes about Tailwind.
  - savanaly 3y ago
    What don't you like about it? Anyways if you don't like it they now have the option to very easily break out of the scaling system by writing like so: p-[4px]. Can use whatever CSS units you want within the square brackets.
- zelphirkalt 3y ago
  Isn't all that p-1, p-2, p-3, ... stuff just like a grid system, that we already had in bootstrap? With modern CSS, I don't think such a rigid system doing size by convention is needed. Make elements resize based on their content and available space. Maybe have a min-width or min-height in some places, but why would one ever go like: "OK this is 3 parts wide, so the rest still has 9 parts left." or similar?
  - MrJohz 3y ago
    To a certain extent yes, but really no. Tailwind is basically just a DSL for CSS. You write these Tailwind classes like "pl-4" or "items-center" and the compiler converts these into real CSS like "padding-left: 16px" or "align-items: center". You can even write arbitrary CSS using square brackets, although the syntax starts getting a bit messier: "pl-[33%]" will convert to "padding-left: 33%", so you really can use whatever arbitrary units and styles you want. So no, it's not particularly like Bootstrap, because Bootstrap is a set of predetermined base styles and components, whereas Tailwind is just a DSL for doing whatever you want to do in CSS but in a different syntax. There is a similarity in that Tailwind provides a number of default lengths, colours, etc for you to use - the "2" in "p-2". These can be used as-is, although in most serious projects, you'll end up adjusting these based on the standard widths coming from your designer. So for example, you might have a 5px scale, in which p-1 represents a scale of 5px, p-2 is 10px, etc. In this sense, Tailwind is reminiscent of CSS frameworks like Bootstrap, but it's more similar to using CSS variables, or having a set of SCSS theme variables - you can use these values in a variety of ways, and there's always the opportunity to just use the raw CSS value syntax with the square brackets. Specifically with the grid example, Tailwind doesn't come with any grid baked in, but you can easily access flexbox (e.g. "flex flex-column items-end" for a vertical flex with items aligned at the end), or CSS grid as you need them, so you're using all the tricks of modern CSS that you'd expect, including very flexible, resizeable layouts. It really helps to think of Tailwind as just a DSL for CSS-in-HTML. Anything you can write with CSS, you can write with Tailwind, just differently. As to whether you need that DSL, it mainly comes down to how separate you want your CSS from your templates. In my experience, the further away my CSS is from my templates, the more like spaghetti they become, so keeping them close together helps a lot. And for deduplication, I can just use whatever tools I was using to deduplicate my HTML - partials, components, loops, etc. (That said, I tend to find that I prefer writing CSS modules, although I do tend to create lots of utility classes there so that I can have consistent padding widths/colours, etc, so my CSS tends to have a bit of a Tailwind vibe to it.)
paxys 3y ago
Tailwind is just a slightly easier way to write CSS. It doesn't have any in-built styles or components, so is nothing like Bootstrap. You are probably using Tailwind UI or some other component framework on top of it (which is the equivalent to Bootstrap that you are talking about).
- mock-possum 3y ago
  If you aren’t confident in your styling skills, Tailwind and it’s ilk can be a shortcut . If you already know CSS inside and out, they’re nothing but hurdles, someone else’s code maddness you must learn the method to in order to contribute.
  - MrJohz 3y ago
    I'm not really sure this is the case, and I think most people who say this haven't tried Tailwind out in anger. Tailwind is really just a DSL over CSS. Which means you need to know and understand CSS to write it. The syntax is perhaps marginally simpler, although it has its own complexities. The biggest thing you no longer need to worry about is selector specificity, but even that's something I rarely worried about in the first place in CSS. Everything else - the cascade, the attributes, the units, pseudo-classes, and so on - are all present in Tailwind, and you still need to understand what's going on to use it. And because Tailwind is mostly just a relatively transparent layer over CSS, all your CSS knowledge still applies. So you're not using "someone else's code", because in writing Tailwind styles, you're just writing CSS in a different syntax. (Whether or not you need that different syntax is another story, and that mainly comes down to how much you use components and partials in your HTML authoring. If you work quite hard on deduplicating your HTML, then Tailwind is useful because your styles end up deduplicated for free alongside the HTML. If you tend to use HTML directly as your content authoring tool, then Tailwind leads to a lot of duplication, and you probably want to use CSS directly.

butz 3y ago

Bootstrap is still here. Tailwind CSS just gives more freedom, and no elements out of the box - you have to do it yourself. Both are great tools to build a landing page or a website fast.

savanaly 3y ago

I don't think this is right at all. Tailwind comes with no opinions about your styles other than their default units of length (p-1, p-2, p-3) having a set REM scaling. Perhaps you're thinking of e.g. DaisyUI [0]? Or some other CSS framework built on Tailwind? [0] https://daisyui.com/ https://daisyui.com/

arxpoetica 3y ago
The default REM scaling is one of my main gripes about Tailwind.
- savanaly 3y ago
  What don't you like about it? Anyways if you don't like it they now have the option to very easily break out of the scaling system by writing like so: p-[4px]. Can use whatever CSS units you want within the square brackets.
zelphirkalt 3y ago
Isn't all that p-1, p-2, p-3, ... stuff just like a grid system, that we already had in bootstrap? With modern CSS, I don't think such a rigid system doing size by convention is needed. Make elements resize based on their content and available space. Maybe have a min-width or min-height in some places, but why would one ever go like: "OK this is 3 parts wide, so the rest still has 9 parts left." or similar?
- MrJohz 3y ago
  To a certain extent yes, but really no. Tailwind is basically just a DSL for CSS. You write these Tailwind classes like "pl-4" or "items-center" and the compiler converts these into real CSS like "padding-left: 16px" or "align-items: center". You can even write arbitrary CSS using square brackets, although the syntax starts getting a bit messier: "pl-[33%]" will convert to "padding-left: 33%", so you really can use whatever arbitrary units and styles you want. So no, it's not particularly like Bootstrap, because Bootstrap is a set of predetermined base styles and components, whereas Tailwind is just a DSL for doing whatever you want to do in CSS but in a different syntax. There is a similarity in that Tailwind provides a number of default lengths, colours, etc for you to use - the "2" in "p-2". These can be used as-is, although in most serious projects, you'll end up adjusting these based on the standard widths coming from your designer. So for example, you might have a 5px scale, in which p-1 represents a scale of 5px, p-2 is 10px, etc. In this sense, Tailwind is reminiscent of CSS frameworks like Bootstrap, but it's more similar to using CSS variables, or having a set of SCSS theme variables - you can use these values in a variety of ways, and there's always the opportunity to just use the raw CSS value syntax with the square brackets. Specifically with the grid example, Tailwind doesn't come with any grid baked in, but you can easily access flexbox (e.g. "flex flex-column items-end" for a vertical flex with items aligned at the end), or CSS grid as you need them, so you're using all the tricks of modern CSS that you'd expect, including very flexible, resizeable layouts. It really helps to think of Tailwind as just a DSL for CSS-in-HTML. Anything you can write with CSS, you can write with Tailwind, just differently. As to whether you need that DSL, it mainly comes down to how separate you want your CSS from your templates. In my experience, the further away my CSS is from my templates, the more like spaghetti they become, so keeping them close together helps a lot. And for deduplication, I can just use whatever tools I was using to deduplicate my HTML - partials, components, loops, etc. (That said, I tend to find that I prefer writing CSS modules, although I do tend to create lots of utility classes there so that I can have consistent padding widths/colours, etc, so my CSS tends to have a bit of a Tailwind vibe to it.)

paxys 3y ago

Tailwind is just a slightly easier way to write CSS. It doesn't have any in-built styles or components, so is nothing like Bootstrap. You are probably using Tailwind UI or some other component framework on top of it (which is the equivalent to Bootstrap that you are talking about).

mock-possum 3y ago
If you aren’t confident in your styling skills, Tailwind and it’s ilk can be a shortcut . If you already know CSS inside and out, they’re nothing but hurdles, someone else’s code maddness you must learn the method to in order to contribute.
- MrJohz 3y ago
  I'm not really sure this is the case, and I think most people who say this haven't tried Tailwind out in anger. Tailwind is really just a DSL over CSS. Which means you need to know and understand CSS to write it. The syntax is perhaps marginally simpler, although it has its own complexities. The biggest thing you no longer need to worry about is selector specificity, but even that's something I rarely worried about in the first place in CSS. Everything else - the cascade, the attributes, the units, pseudo-classes, and so on - are all present in Tailwind, and you still need to understand what's going on to use it. And because Tailwind is mostly just a relatively transparent layer over CSS, all your CSS knowledge still applies. So you're not using "someone else's code", because in writing Tailwind styles, you're just writing CSS in a different syntax. (Whether or not you need that different syntax is another story, and that mainly comes down to how much you use components and partials in your HTML authoring. If you work quite hard on deduplicating your HTML, then Tailwind is useful because your styles end up deduplicated for free alongside the HTML. If you tend to use HTML directly as your content authoring tool, then Tailwind leads to a lot of duplication, and you probably want to use CSS directly.