As a developer, there are many choices to make when building your next application. The rise of serverless technologies allows developers to build and run applications without thinking about servers and this also allows front-end developers to create full-stack applications and build SaaS web apps.
This time, let’s take a look at some options for styling the application. I’ve worked with different approaches like CSS modules, Styled-Components, frameworks like Bootstrap, or just vanilla CSS. In this post, we are going to focus on three of my favorites: SASS, CSS-in-JS, and Tailwind.
Going with classical CSS, using a preprocessor like SASS has been my way of styling applications for years. CSS is easy to learn but very hard to maintain. That’s why, as your project grows larger, you need a proper structure. BEM (Block Element Modifiers), is a naming styling that tries to solve the naming problem and structure that CSS often run into. BEM also provides a better structure for your CSS code and scalable CSS.
CSS preprocessors in combination with BEM definitely improve the development experience a lot, but that doesn’t mean it’s perfect. When your codebase grows, you might start to wonder in which files you should put certain styles and how it should be scoped. You also wonder if old styles are still being used. And you also have to think about performance: you don’t want to load in every single line of CSS on the first page when most of it is used on other pages.
There are multiple CSS-in-JS libraries out there, like Styled-Components, Emotion, and Styled-JSX, and it has some benefits over using classic CSS. I personally really like the fact that it makes it simple to add specific CSS to a component. All styles are only applied to the component, so this also means you do not have to learn methodologies like BEM, use long class names, or need to think about where you put your styles.
Tailwind is a CSS framework, but not like Bootstrap or Ant Design. It’s a utility-first framework, which means it doesn’t focus on predesigned components like buttons, cards, and alerts. It provides low-level utility classes that let you build completely custom designs without leaving your HTML.
If you go for a framework, you usually need to stick to the components of that framework, which can lead to overriding unwanted styles or battling specificity wars. Tailwind is different, it’s basically a different way of styling your application.
There are great benefits of using Tailwind, like development speed. Tailwind provides almost all the tools you need to build out a site in just HTML, so you rarely need to write any custom CSS.
<div class="md:flex"> <div class="md:flex-shrink-0"> <img class="rounded-lg md:w-56" src="[https://cdn-images-1.medium.com/fit/c/32/32/1\*\_SiS1xvFOqiK6TnkiGcZ2A.jpeg](https://cdn-images-1.medium.com/fit/c/32/32/1*_SiS1xvFOqiK6TnkiGcZ2A.jpeg)" alt="Jake"/> </div> <div class="mt-4 md:mt-0 md:ml-6"> <div class="text-sm tracking-wide uppercase text-cloud-burst-600 font- bold">Marketing</div> <a href="#" class="block mt-1 text-lg font-semibold leading-tight text-gray-900 hover:underline">Finding customers for your new business</a> <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p> </div> </div> </div>
Tailwind was built from the ground-up to be super customizable. It comes with a default configuration, but you can simply override the default configuration with a
tailwind.config.js file in your project.
Also, any changes you make will be made in your templates, therefore only affecting the page you’re working on.
Besides that, all its utilities are also generated with responsive versions which are very helpful if you want to make your application look nice on mobile, tablet, and desktop.
One thing I didn’t like about using Tailwind is the long class names you can end up with. The more styling you need on a single element, the longer that class name is going to be. This harms the readability of your HTML files a bit, but after a while, I got used to it and it doesn’t bother me that much anymore.
The other problem with Tailwind is the large file size, but you can use PurgeCSS to fix this. PurgeCSS reduces the file size by scanning your HTML and removing any classes that aren’t used. Luckily, setting up PurgeCSS to work with Tailwind is easy, so this could make Tailwind an absolute winner.
On the other hand, I’ve been working a lot with TailwindCSS lately and I don’t think I’ve ever been that excited about a CSS framework. I made some projects, like RemoteRocket.io, with TailwindCSS and I’ve noticed a huge boost in productivity while working on it. Although it requires some time to learn all the utility classes, you barely need to write any CSS anymore once you master those. And not needing to switch files while styling your HTML elements feels like a blessing.
With all that in mind, I’ve made my stack choice: TailwindCSS. If you think differently, please try to change my mind! Reach out top me on Twitter: @jakeprins_nl.
If you’re interested in saving time on your next project and skipping implementing authentication, payments, tests, etc. then subscribe here to follow my progress in building the SAAS starter-kit for React developers. You can also follow me on Twitter, or at www.jakeprins.com.