5 ms·

What kind of projects do people use Tailwind for? and what's the general role of the person using it? I haven't found a use for it myself as a predominantly fro

What kind of projects do people use Tailwind for? and what's the general role of the person using it? I haven't found a use for it myself as a predominantly front-end dev but I've met a few devs who like it a lot but found that they were generally less comfortable writing plain css without a framework. No shade towards Tailwind intended, just not a paradigm I've gotten on board with yet and trying to understand.

ev1 6y ago
I use tailwind with frontend components. I don't think you're actually supposed to keep the atrocious classes as-is all the way to the end. Or for rapid browser prototyping if I want to get a layout up quickly. For example, my component uses something like this: .btn-indigo { @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75; } In the end, I get a <button class="_1aZeRTY"> or similar and that's it, no mess. All of it gets compiled down, and any Tailwind classes I don't use don't make it into the final .js file
slow_donkey 6y ago
Any type of project. Before Tailwind existed, I used a similar system but Tailwind is obviously more complete than what I'd roll in a week. I really don't think of it as a framework since you're still specifying which CSS properties you want to apply, just indirectly via classes.
qudat 6y ago
We use it for a large enterprise webapp. We have a component library that uses react and applies the correct classes to the component there. I came from mostly using styled-components (CSS-in-JS) and tailwind has worked pretty well for us. The benefit of tailwind over css-in-js is primarily one of performance. The downside is all styling gets shoved into the `className` prop which isn't great. If I had full automonomy to choose the css "framework" I would probably opt for something like `rebass` https://rebassjs.org/ https://rebassjs.org/
- have_faith 6y ago
  I've been using Linaria recently as a zero-runtime css-in-js library. You get a lot of benefits of css-in-js except it compiles it out of the js and into regular css class names and native css perf. Enjoying it so far as I was always cautious of the unneeded overhead of normal css-in-js solutions.
- jfleck 6y ago
  I built a simple macro/postcss plugin to give tailwind more structure, but preserve runtime performance. https://github.com/fleck/class-types.macro#why-use-this-library https://github.com/fleck/class-types.macro#why-use-this-libr...
damnencryption 6y ago
I don't find plain CSS harder to write. It's a bit more verbose and unintuitive to think about sometimes with long-ass property names, too many ways to do the same thing, a bit too low level etc. Tailwind simplifies them and make those things more readable as well as visible. Combine that with postcss, you get ton of functionality via plugins. You can use tailwind in any project. The end result is pretty minimal after purging unlike bootstrap or traditional CSS frameworks. Think of tailwind as high level styling framework that simplifies many common scenarios you tackle with writing few lines of CSS.
Scarbutt 6y ago
You answered your own question, "devs less comfortable writing plain css without a framework"
- rubans 6y ago
  Nah, I'm very confident with CSS and I prefer functional classes. It's just a far more efficient use of my time to not have to write CSS when there's no need.
davidwparker 6y ago
I used it for my site here: https://www.listenaddict.com/ https://www.listenaddict.com/ I've also used it for other various sites in the past. Makes it trivial to add / change / design things quickly, which for me as a non-designer, is great. Also, works well to make things look good on mobile/tablet/desktop sizes, light and dark mode.
- ehnto 6y ago
  If you were instead given a specifc design by a designer, would you be able to use Tailwind only or would there be custom CSS mixed in there to finess it to match the designs?
  - davidwparker 6y ago
    I would 100% be able to use Tailwind only. And in fact, that would be my preference. In the past, a lot of projects I've seen started with Bootstrap + maybe some theme. Then they slowly add custom stuff that ended up being horribly bloated and impossible to refactor well. With Tailwind, so long as you're using @apply properly, or a decent component system (I prefer Svelte), then it's very easy to keep things in a nicely updated, non-custom design.
    - ehnto 6y ago
      That's really cool to hear, that's something I've been a bit confused about since I have to actually dive in to Tailwind. I was unsure how much control you could have from pre-defined classes, but it sounds like it's enough.
    - jeffwscott 6y ago
      Very interesting. As a Svelte user I find Tailwind counter-intuitive, as the CSS is already scoped to the component. I also found the added build step slows down the otherwise snappy dev server. I had purchased Tailwind UI but got a refund after I ended up needing to write custom CSS on top of the Tailwind classes. I would be interested in your setup (I generally use sapper). As an aside, can Svelte reactivity add Tailwind classes? For instance class={`color-blue-${someNum}`} or does all that need to be available at build time (I'm assuming the latter).

ev1 6y ago

I use tailwind with frontend components. I don't think you're actually supposed to keep the atrocious classes as-is all the way to the end. Or for rapid browser prototyping if I want to get a layout up quickly. For example, my component uses something like this: .btn-indigo { @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75; } In the end, I get a <button class="_1aZeRTY"> or similar and that's it, no mess. All of it gets compiled down, and any Tailwind classes I don't use don't make it into the final .js file

slow_donkey 6y ago

Any type of project. Before Tailwind existed, I used a similar system but Tailwind is obviously more complete than what I'd roll in a week. I really don't think of it as a framework since you're still specifying which CSS properties you want to apply, just indirectly via classes.

qudat 6y ago

We use it for a large enterprise webapp. We have a component library that uses react and applies the correct classes to the component there. I came from mostly using styled-components (CSS-in-JS) and tailwind has worked pretty well for us. The benefit of tailwind over css-in-js is primarily one of performance. The downside is all styling gets shoved into the `className` prop which isn't great. If I had full automonomy to choose the css "framework" I would probably opt for something like `rebass` https://rebassjs.org/ https://rebassjs.org/

have_faith 6y ago
I've been using Linaria recently as a zero-runtime css-in-js library. You get a lot of benefits of css-in-js except it compiles it out of the js and into regular css class names and native css perf. Enjoying it so far as I was always cautious of the unneeded overhead of normal css-in-js solutions.
jfleck 6y ago
I built a simple macro/postcss plugin to give tailwind more structure, but preserve runtime performance. https://github.com/fleck/class-types.macro#why-use-this-library https://github.com/fleck/class-types.macro#why-use-this-libr...

damnencryption 6y ago

I don't find plain CSS harder to write. It's a bit more verbose and unintuitive to think about sometimes with long-ass property names, too many ways to do the same thing, a bit too low level etc. Tailwind simplifies them and make those things more readable as well as visible. Combine that with postcss, you get ton of functionality via plugins. You can use tailwind in any project. The end result is pretty minimal after purging unlike bootstrap or traditional CSS frameworks. Think of tailwind as high level styling framework that simplifies many common scenarios you tackle with writing few lines of CSS.

Scarbutt 6y ago

You answered your own question, "devs less comfortable writing plain css without a framework"

rubans 6y ago
Nah, I'm very confident with CSS and I prefer functional classes. It's just a far more efficient use of my time to not have to write CSS when there's no need.

davidwparker 6y ago

I used it for my site here: https://www.listenaddict.com/ https://www.listenaddict.com/ I've also used it for other various sites in the past. Makes it trivial to add / change / design things quickly, which for me as a non-designer, is great. Also, works well to make things look good on mobile/tablet/desktop sizes, light and dark mode.

ehnto 6y ago
If you were instead given a specifc design by a designer, would you be able to use Tailwind only or would there be custom CSS mixed in there to finess it to match the designs?
- davidwparker 6y ago
  I would 100% be able to use Tailwind only. And in fact, that would be my preference. In the past, a lot of projects I've seen started with Bootstrap + maybe some theme. Then they slowly add custom stuff that ended up being horribly bloated and impossible to refactor well. With Tailwind, so long as you're using @apply properly, or a decent component system (I prefer Svelte), then it's very easy to keep things in a nicely updated, non-custom design.
  - ehnto 6y ago
    That's really cool to hear, that's something I've been a bit confused about since I have to actually dive in to Tailwind. I was unsure how much control you could have from pre-defined classes, but it sounds like it's enough.
  - jeffwscott 6y ago
    Very interesting. As a Svelte user I find Tailwind counter-intuitive, as the CSS is already scoped to the component. I also found the added build step slows down the otherwise snappy dev server. I had purchased Tailwind UI but got a refund after I ended up needing to write custom CSS on top of the Tailwind classes. I would be interested in your setup (I generally use sapper). As an aside, can Svelte reactivity add Tailwind classes? For instance class={`color-blue-${someNum}`} or does all that need to be available at build time (I'm assuming the latter).