5 ms·

> You probably haven't actually delved into Tailwind on a non-trivial project. This is precisely where Tailwind breaks down IMO. It's fast for landing pages an

> You probably haven't actually delved into Tailwind on a non-trivial project. This is precisely where Tailwind breaks down IMO. It's fast for landing pages and smaller sites--but when implementing a real design system across a complex web app, Tailwind is a nightmare. We've had to add so much custom stuff to the config file it's basically the same mess our CSS was before. I've been-there-done-that with the whole CSS framework world (have used Bootstrap, Tachyons, Bulma, Tailwind in many projects) and have completely reverted back to custom stylesheets with a few select utility classes that make sense. Padding, margins, widths, heights do not make sense as utility classes IMO. Type scales, type modifiers (like font-weight), and commonly used things like margin-x-auto and 100% width do. I wish there was a CSS framework that only contained a minimal set of common utilities (like the ones mentioned above) and required no complex build process BS or NPM. I just want a simple boilerplate, nothing else.

stanmancan 6y ago
It sounds like you're fighting Tailwind instead of working with it. Are your designers aware of the presets and design with them in mind? I'm curious what you're adding to your custom config to make it so bloated? I've been using Tailwind on a number of sites, big and small, and have yet to run into any situations like you've described.
- pembrook 6y ago
  It's not like Tailwind is SAP or something. It's just CSS. You shouldn't need to re-work your entire process around it. The custom stuff in our config was mostly the need to create standard styles for components. Eg. button large, button small, etc. to correspond with our design system. For example, here's tailwind code required to create a button large: bg-violet-100 text-violet-700 text-base font-semibold px-6 py-2 rounded-lg How the hell does that help with consistency? You have to copy paste that mess every time you create a new button, and then guess what happens if the button you copied from needed special margin? Try debugging that if something looks wrong. Also try turning that into dark mode. Now you've got to search through the spaghetti to find what's custom about this button and fix it every time. You know what's easier? Creating a ".btn-lg" style to fit our design system, and just typing .btn-lg each time. It also has the bonus of making your code actually readable. Maybe this is solved with the groups functionality in the latest tailwind, but this is just one of the frustrations I eventually developed.
  - ylyn 6y ago
    You're meant to use it with some other mechanism for code reuse, say React components.
    - pembrook 6y ago
      The point of react components is to centralize all instances of something for consistency and easy updates. This is also what CSS does for you natively. Tailwind is a beautiful, elegant, and ultimately unnecessary layer of complication. It feels powerful and fast to beginners, and then you go through a design system overhaul with it, and start wishing you had just used bootstrap style class names and avoided the whole mess.
  - rvense 6y ago
    > It's not like Tailwind is SAP or something. It's just CSS. You shouldn't need to re-work your entire process around it. No, your designers should already be working to scales for size, colour etc. which you can implement in Tailwind. If they don't, now's a good time to start. > How the hell does that help with consistency? You have to copy paste that mess every time you create a new button You're extremely not supposed to copy-paste that. You're supposed to extract it somehow, either with your Javascript component framework, or by making a semantic class with the @apply directive. https://tailwindcss.com/docs/extracting-components https://tailwindcss.com/docs/extracting-components The difference is that Tailwind allows you do some quick work without coming up with abstractions. So you work bottom up instead of top down. > then guess what happens if the button you copied from needed special margin? That's the beauty of it! You have a button class, and then if your button needs "a little extra" you add the button class and the margin utility. At my previous job, when this situation came up, the normal way was to make a BEM class specific to the location, import the button in that (with a SCSS mix-in) and add the margin. So the HTML would have a class name that was specific to this one button, but you didn't know what it added: class="info-page__navigation__button". With Tailwind, you get 'class="btn mx-2"' and you can basically see what it's going to look like.
    - pembrook 6y ago
mmmateo 6y ago
In which cases do margin and padding not make sense as utility styles? I’ve only needed custom values a handful of times, but I’m not using it on a complex app
rriepe 6y ago
I'm working on something like this which is close to 1.0. I'd love your feedback: https://cavepaint.github.io/cavepaintcss/ https://cavepaint.github.io/cavepaintcss/
aembleton 6y ago
Try https://andybrewer.github.io/mvp/ https://andybrewer.github.io/mvp/
- pembrook 6y ago
  This looks promising!
- mythz 6y ago
  I love everything about this product page, pro tips, choice quote from the Author & its Amazing Idea generator is genius!
arawde 6y ago
For the minimal CSS framework, I've been a fan of Tachyons on past projects https://tachyons.io/ https://tachyons.io/
- pembrook 6y ago
  I did like how you can use Tachyons as a raw stylesheet without complicating your build process. However, tachyons is even worse than Tailwind in that it offers far too few classes for margins, padding, widths, etc. so you end up having to build everything custom anyways. And you can't just "try" one of these frameworks once or twice, you have to memorize their particular syntax or you lose all of the benefits of using them. After spending hours learning tachyons syntax and googling about 17,000 times, I had forgotten the tailwind way. And when I went back to tailwind I had to google every time I wanted to add a style again. Ultimately, CSS frameworks don't save you time unless you pick 1, customize it to your needs, and do front-end stuff full-time so you don't forget the syntax.
  - runawaybottle 6y ago
    This is low key what makes frontend hard for those that claim fullstack proficiency. Just because you hooked up that UI once upon of time doesn’t mean you still remember or have the muscle memory to do so quickly again later. Or if we put you at a new company or team.
thegreatpeter 6y ago
We have two design systems at Draftbit that utilize tailwind and it’s great. We use what they give us, it works.
manigandham 6y ago
> "Padding, margins, widths, heights do not make sense as utility classes IMO." Why not? They usually benefit from having consistency in the design and that's where utility classes work best.
andrei_says_ 6y ago
What I do is extract spacing, colors, fonts and other standardiz-able elements in SCSS maps and use them in standard css BEM class definition. As in color: c(cool-gray-800); background-color: c(cool-gray-100); font-family: ff(sans-serif); padding: s(m); Where c, s and ff are SCSS functions returning a value defined in scss maps. If you find the tailwind definitions useful, they’re easy to borrow.
possibleworlds 6y ago
Hey, check out https://piccalil.li/cube-css/ https://piccalil.li/cube-css/, but more specifically the stack used for the picalilli website itself (check the footer): https://github.com/hankchizljaw/gorko https://github.com/hankchizljaw/gorko and https://utopia.fyi https://utopia.fyi
Exuma 6y ago
You're doing something wrong then. I'm using tailwind on an absolutely massive project and I have 4 lines of CSS. What you need to do is heavily use the `extends` property of your tailwind.config.js so it applies the paddings and margins you seek to ALL properties.
inopinatus 6y ago
Frankly it sounds like you would have nothing but complaints about any CSS framework.

stanmancan 6y ago

It sounds like you're fighting Tailwind instead of working with it. Are your designers aware of the presets and design with them in mind? I'm curious what you're adding to your custom config to make it so bloated? I've been using Tailwind on a number of sites, big and small, and have yet to run into any situations like you've described.

pembrook 6y ago
It's not like Tailwind is SAP or something. It's just CSS. You shouldn't need to re-work your entire process around it. The custom stuff in our config was mostly the need to create standard styles for components. Eg. button large, button small, etc. to correspond with our design system. For example, here's tailwind code required to create a button large: bg-violet-100 text-violet-700 text-base font-semibold px-6 py-2 rounded-lg How the hell does that help with consistency? You have to copy paste that mess every time you create a new button, and then guess what happens if the button you copied from needed special margin? Try debugging that if something looks wrong. Also try turning that into dark mode. Now you've got to search through the spaghetti to find what's custom about this button and fix it every time. You know what's easier? Creating a ".btn-lg" style to fit our design system, and just typing .btn-lg each time. It also has the bonus of making your code actually readable. Maybe this is solved with the groups functionality in the latest tailwind, but this is just one of the frustrations I eventually developed.
- ylyn 6y ago
  You're meant to use it with some other mechanism for code reuse, say React components.
  - pembrook 6y ago
    The point of react components is to centralize all instances of something for consistency and easy updates. This is also what CSS does for you natively. Tailwind is a beautiful, elegant, and ultimately unnecessary layer of complication. It feels powerful and fast to beginners, and then you go through a design system overhaul with it, and start wishing you had just used bootstrap style class names and avoided the whole mess.
- rvense 6y ago
  > It's not like Tailwind is SAP or something. It's just CSS. You shouldn't need to re-work your entire process around it. No, your designers should already be working to scales for size, colour etc. which you can implement in Tailwind. If they don't, now's a good time to start. > How the hell does that help with consistency? You have to copy paste that mess every time you create a new button You're extremely not supposed to copy-paste that. You're supposed to extract it somehow, either with your Javascript component framework, or by making a semantic class with the @apply directive. https://tailwindcss.com/docs/extracting-components https://tailwindcss.com/docs/extracting-components The difference is that Tailwind allows you do some quick work without coming up with abstractions. So you work bottom up instead of top down. > then guess what happens if the button you copied from needed special margin? That's the beauty of it! You have a button class, and then if your button needs "a little extra" you add the button class and the margin utility. At my previous job, when this situation came up, the normal way was to make a BEM class specific to the location, import the button in that (with a SCSS mix-in) and add the margin. So the HTML would have a class name that was specific to this one button, but you didn't know what it added: class="info-page__navigation__button". With Tailwind, you get 'class="btn mx-2"' and you can basically see what it's going to look like.
  - pembrook 6y ago

mmmateo 6y ago

In which cases do margin and padding not make sense as utility styles? I’ve only needed custom values a handful of times, but I’m not using it on a complex app

rriepe 6y ago

I'm working on something like this which is close to 1.0. I'd love your feedback: https://cavepaint.github.io/cavepaintcss/ https://cavepaint.github.io/cavepaintcss/

aembleton 6y ago

Try https://andybrewer.github.io/mvp/ https://andybrewer.github.io/mvp/

pembrook 6y ago
This looks promising!
mythz 6y ago
I love everything about this product page, pro tips, choice quote from the Author & its Amazing Idea generator is genius!

arawde 6y ago

For the minimal CSS framework, I've been a fan of Tachyons on past projects https://tachyons.io/ https://tachyons.io/

pembrook 6y ago
I did like how you can use Tachyons as a raw stylesheet without complicating your build process. However, tachyons is even worse than Tailwind in that it offers far too few classes for margins, padding, widths, etc. so you end up having to build everything custom anyways. And you can't just "try" one of these frameworks once or twice, you have to memorize their particular syntax or you lose all of the benefits of using them. After spending hours learning tachyons syntax and googling about 17,000 times, I had forgotten the tailwind way. And when I went back to tailwind I had to google every time I wanted to add a style again. Ultimately, CSS frameworks don't save you time unless you pick 1, customize it to your needs, and do front-end stuff full-time so you don't forget the syntax.
- runawaybottle 6y ago
  This is low key what makes frontend hard for those that claim fullstack proficiency. Just because you hooked up that UI once upon of time doesn’t mean you still remember or have the muscle memory to do so quickly again later. Or if we put you at a new company or team.

thegreatpeter 6y ago

We have two design systems at Draftbit that utilize tailwind and it’s great. We use what they give us, it works.

manigandham 6y ago

> "Padding, margins, widths, heights do not make sense as utility classes IMO." Why not? They usually benefit from having consistency in the design and that's where utility classes work best.

andrei_says_ 6y ago

What I do is extract spacing, colors, fonts and other standardiz-able elements in SCSS maps and use them in standard css BEM class definition. As in color: c(cool-gray-800); background-color: c(cool-gray-100); font-family: ff(sans-serif); padding: s(m); Where c, s and ff are SCSS functions returning a value defined in scss maps. If you find the tailwind definitions useful, they’re easy to borrow.

possibleworlds 6y ago

Hey, check out https://piccalil.li/cube-css/ https://piccalil.li/cube-css/, but more specifically the stack used for the picalilli website itself (check the footer): https://github.com/hankchizljaw/gorko https://github.com/hankchizljaw/gorko and https://utopia.fyi https://utopia.fyi

Exuma 6y ago

You're doing something wrong then. I'm using tailwind on an absolutely massive project and I have 4 lines of CSS. What you need to do is heavily use the `extends` property of your tailwind.config.js so it applies the paddings and margins you seek to ALL properties.

inopinatus 6y ago

Frankly it sounds like you would have nothing but complaints about any CSS framework.