5 ms·

For the longest time I avoided Tailwind because including styles right in the markup seems like insanity to me. However, after using it on a project I can't arg

For the longest time I avoided Tailwind because including styles right in the markup seems like insanity to me. However, after using it on a project I can't argue with the results. It's quick to use and the site does look a lot more consistent than other hobby project I've done. To me, the main benefit of Taiwind is not choosing arbitrary values. Writing everything as classes in the markup is something I deal with. It's ocasionally really convenient, but a distraction most of the time. This seems to solve exactly that problem. I still get a reasonable consistent set of values to choose, but can still write normal CSS. I'm really looking forward to trying it out.

iamben 4y ago
IMO the best part of Tailwind (and much like yourself I wasn't sold initially) is working with a bigger team or passing projects around. There's no picking through classes figuring out what's going on; we can literally pass any page to a developer, and assuming they're familiar with Tailwind, they know what's going in the CSS.
- shafyy 4y ago
  Completely. And if I'm working solo, I'm also much faster because I don't need to think about how to name classes and when to create new classes or when to re-use existing ones etc.
nicoburns 4y ago
> I still get a reasonable consistent set of values to choose How do you deal with one of those values needing to change? With SASS or css-in-js you can define a variable and then update it everywhere at once by changing a single line. This seems to be the biggest thing you give up with Tailwind.
- alexmingoia 4y ago
  Use a modular view/component, or a class using tailwind's @apply directive. It's the best of both worlds.
  - nicoburns 4y ago
    Yeah, using components definitely alleviates this issue somewhat. But in our code base we have some values which are global constants. Things like padding values, colors and fonts. Seems like @apply could work. Essentially falling back to regular CSS, but only for these few global values. I might give this a try next time I start a new project.
- iamben 4y ago
  I use Tailwind for some projects, BEM for others. For some projects we've built a rough outline using BEM (for quick everywhere changes) and then when we get to the final thing, used Tailwind. The 'update everywhere' was the biggest hurdle for me, particularly with 'design on the fly' quick pieces. But as per the Tailwind docs, generally you're building reusable parts in Vue or whatever, and you change there. There's a page on it here: https://tailwindcss.com/docs/reusing-styles https://tailwindcss.com/docs/reusing-styles - which I appreciate is still a bit of a 'really?!' kinda thing if you're used to normal CSS. But to quote The Office... Different drinks for different needs.
- bongobingo1 4y ago
  You can modify or extend defaults in your `tailwind.conf.js`, or you can use the arbitrary syntax for "one offs" (`w-[69px]`), or wrap things in components.
- Cu3PO42 4y ago
  If you really want to define some custom "global" variables, you can do that with Tailwind. You are free to add any names to the pool of available values along with a custom value in the Tailwind config. At any point you could adjust such a value. However, I've found such a thing mostly unnecessary. Even with Tailwind I have some abstractions at the component layer so that I don't need to change values all over the place when I want my buttons to have more padding. I'd just change `px-2` to `px-4` in that one place where I define my button styles, for example. If you need to change values dynamically with JavaScript such as you can with CSS-in-JS, I'd typically use CSS variables. Now of course this isn't as powerful a system as SASS variables, but it's good enough. That is to say, I have gripes with Tailwind still, but dealing with variables isn't one of them.

iamben 4y ago

IMO the best part of Tailwind (and much like yourself I wasn't sold initially) is working with a bigger team or passing projects around. There's no picking through classes figuring out what's going on; we can literally pass any page to a developer, and assuming they're familiar with Tailwind, they know what's going in the CSS.

shafyy 4y ago
Completely. And if I'm working solo, I'm also much faster because I don't need to think about how to name classes and when to create new classes or when to re-use existing ones etc.

nicoburns 4y ago

> I still get a reasonable consistent set of values to choose How do you deal with one of those values needing to change? With SASS or css-in-js you can define a variable and then update it everywhere at once by changing a single line. This seems to be the biggest thing you give up with Tailwind.

alexmingoia 4y ago
Use a modular view/component, or a class using tailwind's @apply directive. It's the best of both worlds.
- nicoburns 4y ago
  Yeah, using components definitely alleviates this issue somewhat. But in our code base we have some values which are global constants. Things like padding values, colors and fonts. Seems like @apply could work. Essentially falling back to regular CSS, but only for these few global values. I might give this a try next time I start a new project.
iamben 4y ago
I use Tailwind for some projects, BEM for others. For some projects we've built a rough outline using BEM (for quick everywhere changes) and then when we get to the final thing, used Tailwind. The 'update everywhere' was the biggest hurdle for me, particularly with 'design on the fly' quick pieces. But as per the Tailwind docs, generally you're building reusable parts in Vue or whatever, and you change there. There's a page on it here: https://tailwindcss.com/docs/reusing-styles https://tailwindcss.com/docs/reusing-styles - which I appreciate is still a bit of a 'really?!' kinda thing if you're used to normal CSS. But to quote The Office... Different drinks for different needs.
bongobingo1 4y ago
You can modify or extend defaults in your `tailwind.conf.js`, or you can use the arbitrary syntax for "one offs" (`w-[69px]`), or wrap things in components.
Cu3PO42 4y ago
If you really want to define some custom "global" variables, you can do that with Tailwind. You are free to add any names to the pool of available values along with a custom value in the Tailwind config. At any point you could adjust such a value. However, I've found such a thing mostly unnecessary. Even with Tailwind I have some abstractions at the component layer so that I don't need to change values all over the place when I want my buttons to have more padding. I'd just change `px-2` to `px-4` in that one place where I define my button styles, for example. If you need to change values dynamically with JavaScript such as you can with CSS-in-JS, I'd typically use CSS variables. Now of course this isn't as powerful a system as SASS variables, but it's good enough. That is to say, I have gripes with Tailwind still, but dealing with variables isn't one of them.