4 ms·

I'll bite: how would you compare this to https://material-ui.com/ https://material-ui.com/ ?

joshmanders 7y ago
There's tons of boilerplate to even customize Material UI to make it not look like all other Material UI sites. Want to change how a component looks? Material UI says you must increase the specificity of your CSS... Tailwind CSS/UI components? Just edit your config, or you're in complete control, so uhhh... just remove `bg-blue-700` and replace it with `bg-green-500` if you want it to be green instead of blue.
- thrwaway69 7y ago
  I will bite, how is that different from something like theme-ui - https://theme-ui.com https://theme-ui.com ? You can have a theme file with lot of options passed to your provider and then in your jsx, simply use variant. <Button variant="green" text="there?"/> or for css properties, you can do <Button sx={{ background: `primary` }} text="hey?" />
  - joshmanders 7y ago
    Theme ui looks to be similar, except now you need to know the property you want to set the value on. If I want to make a button have a shadow, it doesn't look very straight forward. With tailwind I just add `shadow` class and I'm off to the races. Plus this looks to be exclusive to React. Tailwind makes no decisions about what you use your styles with, just generates the classes for you. You can use it with vanilla html, react, angular, vue, svelte, etc.
    - _bxg1 7y ago
      Bootstrap can be used without any JS and has had parameterization for years: https://getbootstrap.com/docs/3.4/customize/ https://getbootstrap.com/docs/3.4/customize/ The things you're talking about sound like personal preferences, not killer features that remain out of reach for regular component libraries.
      - joshmanders 7y ago
        Personal preferences shared by over 3,000 people resulting in $500k in sales in 3 days timespan for Tailwind UI. Maybe it's not for you, and that's totally ok, nobody is forcing you to switch to Tailwind. It's just another tool to put into peoples toolbags. Use what works for you.
    - thrwaway69 7y ago
      It's plain css so I don't see the reason why you wouldn't know those properties if you are doing frontend work. For example, mimicking the same shadow as tailwind component, you can add box-shadow: 0 1px 3px 0 rgba(0,0,0,.1); Frankly, I don't see the point in saving a few characters and react/css-in-js solutions make it easy to write reusable components so I don't need a css framework. Theme UI comes with basic components too. Using SASS, postcss, LESS, stylus or any popular framework gives you variables/easy setup to make/use themes. if there is something else unique about tailwind that I missed, let me know. I haven't seen tailwind out of HN circle.
      - joshmanders 7y ago
        > Frankly, I don't see the point in saving a few characters and react/css-in-js solutions make it easy to write reusable components so I don't need a css framework. > if there is something else unique about tailwind that I missed, let me know. I haven't seen tailwind out of HN circle. Tailwind is geared towards people who have the ability to design but aren't really that great with CSS. Take me for example, I have an eye for design, and can put together great UI's and can do everything needed to build my apps... But on a scale of 1-10, my CSS skills are about a 4-6. I could spend lot of time leveling up my CSS skills so I can hand write all my own CSS, or I can use something like Tailwind that is intuitive and easier to learn and lets me focus on what matters the most... Shipping my product.

There's tons of boilerplate to even customize Material UI to make it not look like all other Material UI sites. Want to change how a component looks? Material UI says you must increase the specificity of your CSS... Tailwind CSS/UI components? Just edit your config, or you're in complete control, so uhhh... just remove `bg-blue-700` and replace it with `bg-green-500` if you want it to be green instead of blue.

thrwaway69 7y ago
I will bite, how is that different from something like theme-ui - https://theme-ui.com https://theme-ui.com ? You can have a theme file with lot of options passed to your provider and then in your jsx, simply use variant. <Button variant="green" text="there?"/> or for css properties, you can do <Button sx={{ background: `primary` }} text="hey?" />
- joshmanders 7y ago
  Theme ui looks to be similar, except now you need to know the property you want to set the value on. If I want to make a button have a shadow, it doesn't look very straight forward. With tailwind I just add `shadow` class and I'm off to the races. Plus this looks to be exclusive to React. Tailwind makes no decisions about what you use your styles with, just generates the classes for you. You can use it with vanilla html, react, angular, vue, svelte, etc.
  - _bxg1 7y ago
    Bootstrap can be used without any JS and has had parameterization for years: https://getbootstrap.com/docs/3.4/customize/ https://getbootstrap.com/docs/3.4/customize/ The things you're talking about sound like personal preferences, not killer features that remain out of reach for regular component libraries.
    - joshmanders 7y ago
      Personal preferences shared by over 3,000 people resulting in $500k in sales in 3 days timespan for Tailwind UI. Maybe it's not for you, and that's totally ok, nobody is forcing you to switch to Tailwind. It's just another tool to put into peoples toolbags. Use what works for you.
  - thrwaway69 7y ago
    It's plain css so I don't see the reason why you wouldn't know those properties if you are doing frontend work. For example, mimicking the same shadow as tailwind component, you can add box-shadow: 0 1px 3px 0 rgba(0,0,0,.1); Frankly, I don't see the point in saving a few characters and react/css-in-js solutions make it easy to write reusable components so I don't need a css framework. Theme UI comes with basic components too. Using SASS, postcss, LESS, stylus or any popular framework gives you variables/easy setup to make/use themes. if there is something else unique about tailwind that I missed, let me know. I haven't seen tailwind out of HN circle.
    - joshmanders 7y ago
      > Frankly, I don't see the point in saving a few characters and react/css-in-js solutions make it easy to write reusable components so I don't need a css framework. > if there is something else unique about tailwind that I missed, let me know. I haven't seen tailwind out of HN circle. Tailwind is geared towards people who have the ability to design but aren't really that great with CSS. Take me for example, I have an eye for design, and can put together great UI's and can do everything needed to build my apps... But on a scale of 1-10, my CSS skills are about a 4-6. I could spend lot of time leveling up my CSS skills so I can hand write all my own CSS, or I can use something like Tailwind that is intuitive and easier to learn and lets me focus on what matters the most... Shipping my product.