A Utility-First CSS Framework for Rapid UI Development(tailwindcss.com)

almost 5 years ago from Dima Braven, founder at itmeo.com

  • Roman PohoreckiRoman Pohorecki, almost 5 years ago

    Took a quick look at the button CSS in the first example:

    < button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">< /button >

    That is a TON of micro classes to get a vanilla button going in HTML. I get the atomic movement, but writing all this every time you want to add a button is nutty. And it's hard to decipher.

    1 point
    • Chris GriffithChris Griffith, almost 5 years ago

      If you're working in any templating or component framework you should create a reusable component for something like a button. Then you only write the classes once in the component and then in something like React, call <Button> everywhere else. This also provides a source of truth.

      Try using it in a project before providing the "hard to decipher" argument. Sure, there are a lot of classes there, but you can see every style that is being applied – right in the markup. I'd argue that is easier than parsing through markup and stylesheets and dealing with inheritance issues.

      5 points
      • Olivier FOlivier F, almost 5 years ago

        OK, but if you're going to make a component, why not put normal CSS in that component? I use Vue which has single-file components and scoped CSS. With these capabilities I have a hard time seeing the advantage of tachyons and tailwind.

        2 points
    • Beni GartenmannBeni Gartenmann, almost 5 years ago

      I get your argument, but Tailwind has got you covered ;) Did you see the second example about the component-friendliness? There‘s even a whole section about extracting components in the documentation: https://tailwindcss.com/docs/extracting-components/ I think the @apply directive is very powerful. This, together with the high ability of customization, clearly sets it apart from other atomic css solutions.

      2 points
    • Adam Wathan, almost 5 years ago

      Hey, framework author here! Like Beni mentioned in his reply, we totally agree and have tooling and workflows baked into the framework for extracting these common patterns into component classes when you feel the need to do it:

      https://tailwindcss.com/docs/extracting-components

      We just don't provide classes like btn by default because in my experience with frameworks that do, you end up fighting with default styles and undoing things which I think is more trouble than it's worth. Better to give people the building blocks to create whatever button style they want, and give them tooling to easily create abstractions around those building blocks when needed.

      2 points