Sometimes choosing the right approach for your website styling can be challenging, and you get stuck between all the options you might have as a developer. I am not going to say that one is better than the other, but I am going to give you some valid reasons to make the right choice for your project.
Tailwind
Before making a choice, we need to consider what our application needs. If you seek simplicity and don't have any complex UIs, Tailwind CSS is going to be the best choice for you.
Tailwind by default does not give you any components to work with, except if you use TailwindUI, which is quite expensive. But if you want a free component library, you can use FloatUI.
Tailwind is going to give you a fast setup and an easy environment to work with, but it also has its negatives. Look at that awful piece of code. You have too many classes, and your HTML becomes unreadable.
<footer class="pt-10">
<div class="max-w-screen-xl mx-auto px-4 text-gray-600 md:px-8">
<div class="space-y-6 sm:max-w-md sm:mx-auto sm:text-center">
<img src="https://www.floatui.com/logo.svg" class="w-32 sm:mx-auto"/>
<p>Nulla auctor metus vitae lectus iaculis, vel euismod massa efficitur.</p>
<div class="items-center gap-x-3 space-y-3 sm:flex sm:justify-center sm:space-y-0">
<a href="javascript:void(0)"
class="block py-2 px-4 text-center text-white font-medium bg-indigo-600 duration-150 hover:bg-indigo-500 active:bg-indigo-700 rounded-lg shadow-lg hover:shadow-none">
Let's get started
</a>
<a href="javascript:void(0)"
class="flex items-center justify-center gap-x-2 py-2 px-4 text-gray-700 hover:text-gray-500 font-medium duration-150 active:bg-gray-100 border rounded-lg md:inline-flex">
Get access
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<path fill-rule="evenodd"
d="M2 10a.75.75 0 01.75-.75h12.59l-2.1-1.95a.75.75 0 111.02-1.1l3.5 3.25a.75.75 0 010 1.1l-3.5 3.25a.75.75 0 11-1.02-1.1l2.1-1.95H2.75A.75.75 0 012 10z"
clip-rule="evenodd"/>
</svg>
</a>
</div>
</div>
<div class="mt-10 py-10 border-t items-center justify-between sm:flex">
<p>© 2022 Float UI Inc. All rights reserved.</p>
<ul class="flex flex-wrap items-center gap-4 mt-6 sm:text-sm sm:mt-0">
<li class="text-gray-800 hover:text-gray-500 duration-150">
<a href="#">Test</a>
</li>
</ul>
</div>
</div>
</footer>
But like everything in life, everything has its trade-offs.
To finish off with Tailwind, the best use case is for developers who know little about UI design but want something more custom than using a simple UI library like MUI or Ant Design.
SASS
If you go the route of using SASS, it means you have a basic understanding of UX/UI design and you want to create a more custom design. Most of the time, you want to go this route if you have a UX/UI design and you have a Figma or Adobe XD design.
Keep in mind you also have to use BEM. If you use just SASS, there are little to no advantages compared with CSS. I am going to cover BEM in a separate article, but for your understanding, BEM is a methodology for writing good CSS.
I would not recommend SASS for people who don't want to spend time on very custom UIs, and to be honest, in 2024, 99% of the projects out there are good to go with Tailwind or MaterialUI. Going that route will save you a ton of hours.
But if you have a big project that you work on with multiple designers, custom components, etc., SASS is a good choice. Also, I would highly recommend taking a look at storybook if you go that route.
CSS
Using vanilla CSS is very rare and usually only junior developers choose that option or people working with legacy code.
I would not recommend vanilla CSS to anyone except beginners.
Other Alternatives
In my life, I have used MaterialUI and Ant Design a lot. If you want a boilerplate design, they are really good options, mainly for dashboards. Customizing them can be challenging and not easy.
Also, other options like LESS, an alternative to SASS, are basically useless, and I have only encountered it in Magento projects.
Bootstrap is still a valid choice but is becoming deprecated, and you have many better alternatives to choose from. So, for everyone in 2024, I would suggest going with TailwindCSS and SASS for more custom projects.
Final Words
In conclusion, the choice between Tailwind, SASS, and CSS depends on your project's specific needs and your familiarity with UI design. Tailwind offers simplicity and speed, making it ideal for developers seeking a quick setup with minimal design knowledge.
SASS is suited for more complex, custom designs, especially when working with UX/UI frameworks like Figma.
Vanilla CSS is best left to beginners or legacy projects.
Ultimately, in 2024, Tailwind and SASS are the most practical options for modern web development, providing flexibility and efficiency for a wide range of projects.
Thanks for reading, and I hope you found this article helpful. If you have any questions, feel free to email me at kourouklis@pm.me, and I will respond.
You can also keep up with my latest updates by checking out my X here: x.com/sotergreco
Top comments (1)
Hard disagree! Tailwind exists to try to combine the style of a component with its content, and to keep the bundle of style-and-content separate from every other bundle in your website, and Sass's only benefit over CSS these days is mixins and extends.
I don't follow - BEM and Sass are two independent things. Sass was an attempt to use preprocessing to give more functionality to CSS before that functionality was available in the official language, and BEM is a convention for hacking classes into identifiers to try to separate concerns (which in the real world ends up meaning you have a million duplicate rules and hate your job).