September 17, 2019

Why Use Tailwind CSS Framework in a World Full of Bootstrap?

34 likes

You may think that the question from the headline is not completely fair. Putting Tailwind CSS versus Bootstrap doesn’t sound like a comparison of two absolutely identical CSS frameworks. And maybe you are right… to some extent. But I want to share something with you. A knowledge, that will help you decide if you should finally try this new CSS framework and how it is going to help you with the development of your next website.

“From my experience Tailwind, CSS has two very important advantages over some of its competitors. One is its great flexibility when you are starting a project from scratch. And the other is the fact that it’s not linked with any JavaScript Framework specifically.”

Radoslav Boydev | Software Engineer | ScaleFocus

And who knows, maybe it will help you overcome some of the problems that you had with other CSS frameworks.

Even with Bootstrap…

From this blog post you will learn:

  • What is Tailwind CSS?
  • Tailwind CSS vs. Bootstrap.
  • In detail: The role of the utilities in Tailwind CSS.
  • Your first steps with Tailwind CSS.
  • Tailwind CSS workflow: Creating a user interface of a webpage as a part of an internal ScaleFocus tutorial.

Tailwind CSS vs. Bootstrap

Let’s start with the well-known CSS framework. Bootstrap was created with the idea of “mobile-first” and allowed the developers to adjust the page automatically for a different size with the help of few Bootstrap classes (an identifier that can annotate multiple elements in a document).

“A framework is a standardized set of concepts, practices, and criteria for dealing with a common type of problem, which can be used as a reference to help us approach and resolve new problems of a similar nature”.

Awwwards | What are Frameworks?

Today, one of the greatest strengths of Bootstrap is its popularity. This is a large ecosystem and there are countless website layouts that you can use, UI components, themes and so on. But the popularity has a dark side – most of the websites that are built on Bootstrap look pretty similar. And if you want to make big changes to the layout, you have to be ready for a serious code battle! This means that yes, you can make changes to the default paddings of the containers, for example, but you’ll have to invest a lot of time. And this is not the initial idea of Bootstrap or any CSS framework for that matter.

a drawing of a girl with a laptop and a boy with tablet sitting on a pencil. it's a screenshot of a webpage.

Important things to know about Bootstrap

  • It’s a mobile-first CSS framework.
  • It has components containing JavaScript and CSS.
  • Easy to start a project.
  • Great for prototyping.
  • It’s easy to extend.
  • It’s limited by browser versions.
  • There is a small set of reusable utilities.
  • It can provide monotonous interfaces.

Then there is Tailwind CSS. This is a utility-first CSS framework for “rapidly building custom designs” (without the worry that your website will look like the rest that are made with it). “Utility-first” means that Tailwind CSS doesn’t have pre-styled components (like buttons, cards and so on). It’s focused more on utility classes instead of fully-fledged UI components. This way you can create your project with more creativity and with a custom look. Without writing a single line of custom CSS.

Tailwind CSS website screenshot.

Source: Tailwind CSS Official Website

Only by using classes to do so!

This is one of the biggest differentiators of Tailwind CSS compared to Bootstrap, Foundation, UIkit and so on. But it comes at a price. You have to create everything from scratch and the size of Tailwind CSS is bigger compared to some other frameworks. It’s no secret why – this framework comes packed with a lot of options and various styles that you can choose from. As I mentioned above – the idea is to create a project without writing custom CSS.

The size of Tailwind CSS can be significantly reduced. To do so, you need to do some work before you start your project. All the Tailwind’s features and styles are easy to configure and even to delete if not necessary. For example, you can remove most of the colors if you know which ones you are going to use in your project.

The other option is to use Purgecss to remove the unnecessary code after you have finished your project.

“Pretty sure @tailwindcss is going to be a big deal.”

Taylor Otwell | Founder of Laravel

Important things to know about Tailwind CSS

  • Focus only on the CSS – There is no JavaScript. And because of that, you can easily bind it with any JavaScript framework of your choice.
  • Responsive variants for all utilities – All the classes are responsive. For every single class you generate, it’s generated in a couple of versions that can be configured separately from one another.
  • A large set of utilities – You have a lot of options to style the components of the interface.
  • Component friendly – All the classes (utilities) are primitive and you can combine them in more complicated components that ultimately form the interface.
  • Easily customizable – Because everything starts with one SASS file (for example) and one JavaScript configuration file.
  • Pseudo-class variants – The process of including pseudo-class (used to define a special state of an element) is automatic.
  • Extending with custom utilities – You can use custom classes. This is part of the idea that is extensible.
  • Big deal in Laravel’s World – This is the most popular PHP framework now and Tailwind CSS comes out of the box packaged with Laravel.
  • Very flexible – Tailwind CSS gives you а rich set of tools. The result depends almost entirely on your ideas.
  • More work to set the foundations of the UI – Tailwind requires the creation of a configuration file, preparation of webpack and your favorite CSS preprocessor.
  • Not limited by the browser versions – This depends entirely on the utilities that you use.

CSS frameworks comparison in 2019 by stateofcss.com

One fascinating fact: Tailwind CSS has the highest satisfaction rate among the developers who had the opportunity to work with it.  Source: CSS 2019

In conclusion, all this means that…

If you want to create a simple and relatively standard-looking blog, Bootstrap is the logical choice. But if you want to make something different and unique, then Tailwind CSS comes in the front of the line of the CSS framework army.

And it’s seriously armed.

In detail: Tailwind CSS and the utility classes

Now that I have established the difference between both CSS frameworks, let’s dive deep into Tailwind CSS.

A single Google search of “Tailwind CSS” gives you more than 200 000 results. And in GitHub, this framework has more than 14 000 Stargazers. Not bad for a CSS framework, released on Halloween night in 2017.

Tailwind CSS version 1.1 screenshot.

There is a lot of information online for Tailwind CSS, but for this blog post, it was important for me to add my experience with this framework. The last part of this blog post is based on an internal Tailwind CSS training that I conducted in ScaleFocus. This way I can share with you all the details that you need to know (in the form of a tutorial) so you can make an informed opinion on Tailwind CSS. And who knows – maybe even give it a try?

One of the important things that you must know for Tailwind CSS is that it is based on PostCSS (development tool that uses JavaScript-based plugins to automate routine CSS operations) and it’s very customizable.

As you learned from the previous part of the blog post, Tailwind CSS is a utility-first framework. The utilities are CSS classes that have a defined purpose.

Let’s decipher this line from Tailwind CSS and find out what does it mean for the user interface:

  • .max-w-sm – max-width small (24rem).
  • .mx-auto – margin – top: auto and margin-bottom: auto.
  • .flex – display property set to flexbox
  • p-6 – padding 6 (1.25rem).
  • .bg-white – background with white color.
  • .rounded-lg – border-radius: .5rem.
  • .shadow-xl – box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05).

It’s a button. A white button with round edges and a shadow. But with a little tweak, it could be with a different color (bg-blue-500), you can add a hover effect with lighter blue (hover:bg-blue-400) and so on. With the help of the utilities, you can style almost every element from the user interface just the way you want it to be.

The good news is that the names of Tailwind CSS classes are relatively clear, but you’ll need some time to memorize them. Until then you can use the official Tailwind CSS documentation. It’s great, it’s easy to use and you’ll find everything that you need there. Including all the names of the utilities and useful examples.

Tailwind CSS documentation example.

Source: Tailwind CSS Documentation and Search

One other thing, that comes from the utility-first approach of Tailwind CSS, is that every class has a single purpose. So, you’ll use a lot of them. This means that your code will look unusual compared to other CSS frameworks. You’ll see more of this in the last part of the article – the Tailwind CSS tutorial.

For some front-end developers, the HTML class attributes can become too long. Additionally, one of the negative comments about Tailwind CSS is that because of the length it could be harder to find an error. Well, I beg to differ. The reason is that since every class has a single purpose it makes it easy to spot your errors.

I’ll let you decide. Here is an example that is taken from the tutorial that I’ll use in the last chapter to show you the workflow of Tailwind CSS. These are all the classes that are used to create a button. Yes, another one.

a button with blue outline, an icon and a sing in text

Source: ScaleFocus’ Tailwind CSS Tutorial

There is a way to tighten up long classes with a special directive – @apply. For example, it’s a good idea to create a custom class for an element that consists of 10 utilities, especially if it must be implemented a couple of times in the UI.

As you’ll see in the workflow example, I have a repeatable element – a video clip card that resembles the one from YouTube’s home page. This is a great opportunity to use @apply. It looks like this:

Apply video card 3 in tailwind css

Source: Tailwind CSS Tutorial. This is .videoclip-section with all the elements – header, caption, image, action, etc.

To do this, you have to select all the classes of the video clip card. You open the taiwind.css file and create a new class after @taiwind utilities. You write the name of your specific class, in this case, “.videoclip-card” and you paste the copied classes on the next line. This way every time you need this video clip card, you just have to use the custom reusable class.

Source: Tailwind CSS Tutorial. Those are all the classes that need to be copied.

It is important to note that currently, @apply doesn’t support utilities with variant prefixes, hover or focus. But there is a way. You need to apply the plain version of that utility into the appropriate pseudo-selector or a new media query.

After that, you can just go to your HTML and replace all the classes for the video clip card with “class=videoclip-card”.

Source: ScaleFocus’ Tailwind CSS Tutorial

In the last chapter (the Tailwind CSS tutorial), you’ll see another example of that.

NB! Why do you need to write @apply after utilities? The reason is to make sure that even if you use your class, you can layer others and tweak it. If, for example, you want to add additional horizontal padding.

Before I move to the final chapter of this blog post, which is some practical work, I must add two important things – one, how to start a Tailwind CSS project, and second – which are the main utilities.

There are two ways to start a project. The first one is to generate a full configuration file (config.js), which contains everything and every single variable.

The second one is to generate an empty configuration file and to insert only the things that you want and need in it. This way you’ll spend a little bit more time setting up the Tailwind CSS upfront, but it will pay off later in your work. You can always delete the unnecessary stuff from the full configuration file later. Those two operations are not advised if you are going to use Tailwind CSS for the first time.

Tailwind CSS offers everything that a standard CSS provides. But all of that is structured in utilities and they are ready to be used. There are a lot of them, so my advice is to refer to the official documentation. Here are the main utilities.

  • Layout – A container with different sizes depending on the screen. Its components are a container, display, float, object-fit, object position, overflow visibility, etc.
  • Typography – The are a lot of utilities for styling your text – everything that you can think of, including some that are not so common like font smoothing. There are utilities for the font (family, size, style, weight, colors, etc.), letter spacing, line height, text, list style, etc.
  • Backgrounds – There are utilities for the repetition of the background (repeat), it’s color, position, size and even how the background behaves when scrolling.
  • Borders – With the available utilities you can set the color, style, width, and radius of the border.
  • Flexbox – This is an interesting group of utilities. They include direction, you can set the growth of the flexbox or how much it could shrink, how it aligns, etc.
  • Spacing – Here you have the standard padding and margin, but with a lot of variations (e.g. from padding:0 to padding: 16rem; padding from top and bottom, horizontal or vertical or from every direction).
  • Sizing – Just like with spacing, here you have different utilities for width and height. It’s important to point out that you can have a class like “ .w-1/4″. Please keep in mind that those are percentages.
  • Tables – You can use utility for setting if the table borders should collapse or be separated and a utility for controlling the table layout algorithm.
  • Effects – The are utilities for opacity and shadow effects. For example, you can control not only the size of the box shadow but if it’s the inner, the outline, etc.
  • Interactivity – This group includes utilities for appearance (suppressing native form control styling), type of cursor when scrolling, outline control, if an element has to respond to pointer events, etc.

All this means that, for example, for “border” Tailwind CSS generates utilities for color, radius, width, style and so on. You can use every one of them to create the border that exactly fits in your idea. The example below describes the creation of a search bar that has a solid border.

And the result is:

a search bar with an icon of magnifying glass

Tailwind CSS workflow tutorial: the first steps to create a webpage

Those are some of the basic things that you must know about Tailwind CSS. The truth is that it’s not hard to start using it and you’ll quickly see the possibilities that you have with all the utilities.

The workflow in a nutshell:

  1. Create an HTML document from a starter template.
  2. Include the CSS entry file.
  3. Generate the configuration file (optionally remove what you don’t need).
  4. Start making up the HTML document.
  5. Build Tailwind CSS styles.

First steps

In the source directory of the project ScaleTube, I’ll work in the index.html file. JavaScript dependencies are installed via npm install and the full generated config file is generated via npx tailwind init –full.

NB! It’s important to know that CDN (Content Delivery Network) doesn’t have all the available features. For that, you’ll have to use npm (package manager for node.js).

screenshot of visual studio with code in it

This is how the pre-configuration file looks like. Here you can see Important, Breakpoints, some of the colors. Every Tailwind class can be modified from here.

This is how I started this project. Those are the first steps you begin with:

1. Create the package.json file which contains all the dependencies and tools required to start developing

npm init -y

2. Run these commands to add required dependencies:

npm install cross-env –save-dev

npm install laravel-mix –save-dev

npm install tailwindcss –save-dev

npm install laravel-mix-tailwind –save-dev

npm install sass –save-dev

npm install sass-loader –save-dev

npm install resolve-url-loader –save-dev

3. Copy Laravel Mix’ build script and modify it appropriately

cp node_modules/laravel-mix/setup/webpack.mix.js ./

4. Generate the full version of Tailwind’s configuration file. You have to remove whatever you don’t need in your project.

npx tailwind init –full

5. Rename the Tailwind’s configuration file because Laravel Mix uses a different configuration file name

mv tailwind.config.js tailwind.js

6. Add this fragment in the package.json file:

“scripts”: {

“dev”: “npm run development”,

“development”: “cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js –progress –hide-modules –config=node_modules/laravel-mix/setup/webpack.config.js”,

“watch”: “npm run development — –watch”,

“hot”: “cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js –inline –hot –config=node_modules/laravel-mix/setup/webpack.config.js”,

“prod”: “npm run production”,

“production”: “cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js –no-progress –hide-modules –config=node_modules/laravel-mix/setup/webpack.config.js”

}

All the styles are in the *.scss file (in this case: scaletube.scss). This is later compiled and produces the entire styles set for the user interface.

There are three Tailwind CSS directives that are important in it:

  • @tailwind base – This injects Tailwind’s base styles registered by plugins. It can be used for the rest of the styles.
  • @tailwind components – This injects Tailwind’s component classes and any component classes registered by plugins.
  • @tailwind utilities – This injects Tailwind’s utility classes and any utility classes registered by plugins.

If you want to add custom code, you have to put it after those directives. Also, this is the place where you’ll have your @apply directives.

Now let’s move on to the main part of the project that I used in the internal training.

I start by setting the layout. Based on the page that I want to build, I have decided that I’ll divide the layout into three parts – header, navigation (the list on the left) and content (the tiles with titles and additional info).

screen shot of a grid with cards with titles and statistics

This is how the final page will look like.

After that, it’s time to choose the color of the background – I go with white. So, I add the utilities for the background color (bg-white) and the text (text-black). If for example, I wanted to use gray, I could put text-gray-900. The digits at the end show the nuance of the color – 900 is the darkest gray and 100 is the lightest. If I add “text-lg”, this means that I am choosing a larger font size (font-size: 1.125rem).

Background and text color.

Header

This is the first part of the page that I’m building. I divide it into three parts – the hamburger button and the logo, the search bar and the buttons on the right side.

I use flexbox for the positioning of the elements. After that, “flex flex-col h-screen”, which means that it’ll be using flexbox and it’ll be column aligned and the height will take the full screen.

For the header, I use height 16 (h-16 or 4rem) and I don’t want it to change in the responsive design. For that, I put “flex grow-0”. For the content part of the page, I use “flex-grow flex-row” because I want to take the whole content part and to be roll aligned.

So far so good. Now I want to add some shadow to the header to make it pop, so I use utility “shadow”.

a table with information about the shadow class in tailwind css, showing all the properties

The different shadow sizes. Source: Tailwind CSS Documentation.

After that I add the logo, using font awesome with custom color and search with border and button. Now I add icons from the right side. This is how the utilities look like:

Source: ScaleFocus’ Tailwind CSS Tutorial.

And this is the result:

A header made by Tailwind CSS framework tutorial.

The whole header is made without a single line of custom CSS.

Navigation

In this project, I have a couple of menus, containing the same elements (icons, texts, hover effect) – Home, Trending, Subscriptions, Library, History and so on. This is the perfect example of a situation that a custom component (@apply) will speed up the work progress. So, I don’t have to create a long line of classes for each of the repeating parts of the navigation.

Let me show you how I’ll do this here. This is a key part of making navigation and creating @apply, so I’ll emphasize it in this section.

Let me start with:
List (<ul>) with a couple of elements, including Font Awesome icons:

Source: ScaleFocus’ Tailwind CSS Tutorial

As you can see I have different text for the different buttons from the menu, but the more important thing here is the “class=.menu”. This is my custom @apply component, which combines the different primitive classes that I need for my “.menu”.  It’s in the Tailwind’s Sass file under all the important Tailwind CSS directives.

 

As you see I have all the needed elements that I can reuse in Index.html to form all the similar elements. With the “.menu” I apply the style and I just need to change the icons and the text.

NB! As said before, I’m using the utilities with variant prefixes, like hover or focus, into the appropriate pseudo-selector or a new media query.

For the text component with a button, I won’t use @apply, but regular Tailwind CSS utilities.

Source: ScaleFocus’ Tailwind CSS Tutorial

Because I want to have padding from every side, I use “class=”p-2”. For the button, I use “class=” border border-blue-500” because I want border from every side and I want it to be color blue – not too dark, but not too light. Px-4 means 1rem padding from the right and left and py-2 means 0.5rem padding from the top and the bottom.

Navigation made by using Tailiwnd CSS framework.

Content section

Just like the navigation part, here are some repetitive elements, so I’ll use the @apply function for creating a custom utility. This is the previous example.

Second @apply - tailiwnd css

This time I have a header (it could be just text, or a combination of text, pictures, and button – Trending section in the example), picture and information.

Under the header, I have the video clip section. Every video is a grid (like in Bootstrap) with a picture, heading, uploader, date of upload and watch counter.
The video clip section needs a border, the header needs flexbox so I can align it vertically with bottom padding. Next, to the heading of some sections, there is a picture (I use utility “rounded-full” to make it round). And at some sections, there is a green button on the right.

And this was the last element of the Tailwind CSS project. It’s ready!

Conclusion

As you see Tailwind CSS is a framework that you can rely on to quickly build simple, yet functional and even beautiful looking webpages, without the need to write custom CSS. When you use frameworks, you have more time for new ideas, concepts, and functionalities.

If you are looking for an experienced team that can transform your ideas into reality, you can write us right away from the contact form below.

 

Author: Radoslav Boydev | Software Engineer