Hi, this is Leonardo.
I'm a simple human that tries to improve day by day, step by step. If it’s your first time here you can read who I am in this blog post “Who am I”, otherwise skip this part.
Introduction
From their website we understand that TailwindCss is a utility first css framework. It allows us to write our style directly in the html. “Yes OK” you will say “but I have a thousand of questions!” Don’t worry, in the article I will try to answer everything you should evaluate to see if it is a right fit for your needs.
What it is and what are the advantages?
Let’s get straight to the point. Why bother learning this new way of writing CSS? Well I’d start by saying it’s fucking fast! What do I mean by fast? Imagine no longer having to create separate files for component markups and its styles. Imagine no longer having to think of names for “Wrapper” or “WrapperOfWrapperOfWrapper”. Not having to continually import or export css variables. Imagine you can do it all in one line.
Imagine being able to copy and paste entire structures of components already created by someone else, where you can apply your personal style in the blink of an eye. Imagine being able to focus primarily on creating the logic of your application.
That is Tailwind.
Why is it better than others?
I have never really tried other css frameworks in the same way I tried Tailwind. But what I can tell you is that while others have a more defined and less easily customizable style, with tailwind everything remains in our hands, but at the same time it allows you to have a good level of predefined style guidelines.
So if you are like me, you don’t have a strong knowledge of design, you can still create beautiful applications or web pages without compromise the unicity of your style.
A site created with tailwind is difficult to detect at first sight, on the contrary the sites created with other frameworks have a more marked and recognizable imprint.
I want to show you some example of what triggered my curiosity.
Below an example of an easily integrated dark mode:
// tailwind.config.js
module.exports = {
darkMode: ‘medium’,
// …
}
<div className=“bg-white dark:bg-gray-800”>
// .....
</div>
Not to mention the media query, which can be integrated with a simple "md: text-white" to say "@media (min-width: 768px) {…}".
In my humble opinion this is really cool and everything is so easily customizable.
Also, most Tailwind projects ship less than 10KB of CSS to the client.
Why not just use CSS?
Because Tailwind requires a minimal learning curve and the documentation it’s really well done. Over time, it will make the creation of projects much easier and faster, without having to leave behind the flexibility of pure css.
Furthermore, once you have decided to create a project with tailwind, it will always be possible to apply other types of css, like styled components.
Recap
- Speed up the creation and the design of any project
- Allows you to raise the bar of your style
- You can say goodbye to having to create fancy names for your components or Css variables = Easy
- Highly customizable
- Dev friendly, covers the real needs that a developer may have in 2021
Top comments (15)
It's an old way of writing everything! Nothing in Tailwind is new, and nothing was even new at the point when Tailwind came out.
But the content and the appearance are two separate things! Let's say you want a different makeover during certain times of year for holidays and so on. Or you want to give people a "reader mode", or you support people who want to print the page out.
You're replacing your own homebrew "div soup" with someone else's. You don't need all those wrappers, in the same way you don't need all those million-and-one classes. 99% of websites could look exactly the same if every
divwas removed.I agree with your point. Tailwind is for sure far from perfection. But I feel it's giving a lot of benefits at my daily coding work. It's fun and easy to master. Obviously this is just my humble opinion and impression.
Again you are totally right. But forn now, I'm liking a lot this "div soup". 😄
Anyway thanks a lot for your comment, really appreciate.
Hello. I tried tailwind in the past but gave up because, as like @moopet pointed out, you need sometimes a makeover. And instead of replacing all css classes, you replace the css file. Done.
This is why I don't use Tailwind:
This is a button:
You're creating all those style rules in CSS anyway. What's the difference? If you're adding multiple buttons with the same style, create a class and apply all those styles to it, or just add it to the base
buttonstyles.That's not how people use it; people do it the Bad Way in the example. Yes, you can use these to make up base rules, and that's fine to be fair, but it's the same as using something like Sass or Less with mixins, which people were doing for a decade before Tailwind appeared.
Personally I think Tailwind is great for smaller websites and SPAs in particular. I've only started using it recently in building my personal website and I'm a fan of it.
For my work, we have large stylesheets that become messy and cluttered and as much as I would love them to be clean, I know that's not easily achievable. While I haven't had to do it yet, I think maintaining Tailwind would be a lot simpler than a bunch of CSS styles that possibly overlap.
I like my HTML clean as much as possible.
True, this is one of the reasons I didn't like tailwind at first. But
@applyclasses changed my whole view on tailwind. Using@applyin combination with Sass is a whole different way to Write reusable TailwindCSS components: elian.codes/blog/using-tailwind-wi...This!
It is just the newest shiniest framework.
The world spent the better part of the '90s figuring out how to separate markup from style and just when people finally figured out how to theme their website based on whether it's Christmas or not, here comes Tailwind take us back to when Altavista was the search engine.
Progress ftw.
Tailwind just saved me a lot of keystrokes. It is easier to prototype or just change something quick with it. Especially
@applysaves me lots of time spending on writing tedious style, media query, pseudo class (Such as:hover).I use Tailwind in form of WindiCSS with Vue. So, I don't have to worry about purging unneeded styles. I use
twin.macroin React and Next.Tailwind rules. Now with JIT mode it's the ultimate CSS machine. Use it in html, use it in CSS files, sass or any other and enjoy speedcl and uniformity across all project. Perfecto!
I love Tailwind but PLEASE.
Don’t use Tailwind before understanding CSS first.
Oh Yes!! I totally agree.