11–20 of 60 posts
> Get started with an open-source set of UI components and elements built with Tailwind CSS Doesn't it kind of defeat the purpose of Tailwind?
Tailwind is just a method in which to style components on a page. Replace "Tailwind CSS" with "StyledComponents" or "SASS" or "BEM".
For those worried about the classes upon classes in the HTML, I find it OK. OK, for hacking up marketing, landing, and websites. There are two ways of using a utility framework such as TailwindCSS.
1. Every module is HTML-designed and is seen from a designer's eye; know what they should look like. We see this in TailwindUI and here too with Flowbite.
2. Use Tailwind as a utility class and create CSS classes looking at the overall design and standardizing components.
Point No. 1 is more straightforward than 2 in the short term, but Point No. 2 would be the ideal approach and more easily maintainable.
Here are few examples from our website that uses Tailwind. Please be lenient; it is not a public consumable template/markup.
The general UI is driven by design token at the Tailwind configuration level -- https://github.com/valinorearth/valinor.earth/blob/master/ta...
Color Scheme follow a similar pattern https://github.com/valinorearth/valinor.earth/blob/master/ta...
Then, we write CSS but using Tailwind as a utility - https://github.com/valinorearth/valinor.earth/tree/master/sr...
For instance, for a button, instead of apply everything in each and every ``, we create a `.button` class and create the button component of our choice https://github.com/valinorearth/valinor.earth/blob/master/sr...
I hope this is useful to few who wants to use Tailwind in either of the two ways.
Earlier quoted context omitted.
Tailwind is just a method in which to style components on a page. Replace "Tailwind CSS" with "StyledComponents" or "SASS" or "BEM".
Last thing I would do is to put Tailwind next to BEM. They're not equivalent in any capacity.
The BEM philosophy is to capture individual pieces of your UI as unique CSS classes (.Button, .Button-icon, Button-text). The "utility first" approach removes that abstraction entirely.
> Get started with an open-source set of UI components and elements built with Tailwind CSS Doesn't it kind of defeat the purpose of Tailwind?
Tailwind is just a method in which to style components on a page. Replace "Tailwind CSS" with "StyledComponents" or "SASS" or "BEM".
Tailwind can be used to build/write "StyledComponents". And one can write in the style/methodology/philosophy of BEM.
All the the above terms are all of different categories.
Earlier quoted context omitted.
Tailwind is just a method in which to style components on a page. Replace "Tailwind CSS" with "StyledComponents" or "SASS" or "BEM".
Tailwind is written in SASS and is not like SASS. I would equate Tailwind to an earlier utility framework like Bourbone[1]. Tailwind can be used to build/write "StyledComponents". And one can write in the style/methodology/philosophy of BEM. All the the above terms are all of different categories. 1. https://www.bourbon.io
From the development perspective and from other comments that are here, and also from many articles like: https://dev.to/jaredcwhite/why-tailwind-isn-t-for-me-5c90 or https://dev.to/neophen/tailwind-is-bad-because-i-don-t-like-... or https://betterprogramming.pub/tailwind-css-is-probably-overh... you can see that there are still a lot of people who hate the way Tailwind work with classes. But in the same time you can see that they have a steady grow month over month since April 2019: https://www.similarweb.com/website/tailwindcss.com/ that means some people love the way Tailwind is working with utility classes.
So I think this is a really good extension that can speed up the development process of people who like Tailwind. For those who don't like Tailwind, there are many other alternatives. There is no such thing that can fit for everybody.
Some questions 1. What did you use to create the docs? 2. What are your next steps with this project?
Earlier quoted context omitted.
Last thing I would do is to put Tailwind next to BEM. They're not equivalent in any capacity.
Actually Tailwind is the antithesis to BEM, so it's funny how you wouldn't compare them. The BEM philosophy is to capture individual pieces of your UI as unique CSS classes (.Button, .Button-icon, Button-text). The "utility first" approach removes that abstraction entirely.
From a design perspective this looks really good, I like the components, the typography, the generated pages from Figma etc. Also the documentation seems to be clean and user-friendly. It's way better than most of the docs. From the development perspective and from other comments that are here, and also from many articles like: https://dev.to/jaredcwhite/why-tailwind-isn-t-for-me-5c90 or https://dev.to/neophen/tailwi…
1. We used HUGO as a static site generator and Webpack to put things together using markdown files. (it's open-source: https://github.com/themesberg/flowbite including the HUGO source files)
2. We're now working on the application UI code (pro version) but we will also add new components and external styled plugins (datepicker, charts) to the open-source library.
We have a roadmap on the landing page: https://flowbite.com/#roadmap
Earlier quoted context omitted.
Actually Tailwind is the antithesis to BEM, so it's funny how you wouldn't compare them. The BEM philosophy is to capture individual pieces of your UI as unique CSS classes (.Button, .Button-icon, Button-text). The "utility first" approach removes that abstraction entirely.
I didn't say I wouldn't compare them - I said I would put one next to the other, by which I meant Tailwind that is generally a bad idea.
Anecdotally I've built hundreds of websites, and worked on many product teams building web applications all with varying team/product sizes and in my experience BEM scales very poorly. I have never worked on a BEM codebase without a shocking level amount of tech debt. Adding new UI requires creating new CSS files, refactoring existing UI requires also refactoring the separate CSS files, removing UI is the same thing. Due to this disconnect, old code tends to stick around.
One of my product teams moved from BEM to Tailwind and productivity/maintainability improved tremendously.