Why Use Tailwind CSS?

There are already a lot of CSS frameworks that simplify how developers design web pages. So why should you use Tailwind CSS?

CSS frameworks such as Bootstrap and Foundation are opinionated frameworks, meaning they provide developers with pre-defined components that have default styles. This limits both customization and creativity, and you end up with websites that look rather generic.

Tailwind CSS, however, is a utility-first framework that gives you the creative control to create dynamic components. And unlike Bootstrap, you can easily customize designs as you please.

Another advantage of using Tailwind CSS is that you end up with a small CSS bundle size since it removes all of the unused CSS during the build process (which is different from Bootstrap, since it includes all CSS files in the build).

Learn more about the differences between Tailwind CSS and Bootstrap from our article on the topic.

Disadvantages of Using Tailwind CSS

Tailwind CSS has a steep learning curve even for experienced developers. It takes some time to learn how to fully use the utility classes, and you might need to refer to the documentation often. However, after getting familiar with the classes, you’ll find it easier and speedier compared to plain CSS.

Most developers like to follow the separation of concerns principle such that the CSS and HTML files are written in different files. With Tailwind CSS, you write the CSS directly in the HTML markup—a drawback for some.

Even with these disadvantages, Tailwind CSS is a framework that you should seriously consider if you’re already comfortable with CSS and want to build designs faster.

Getting Started: Create a React Project

Run the following command in the terminal to scaffold a React application using create-react-app.

create-react-app provides an easy way to create a React app without configuring build tools like webpack, babel, or linters. This means you end up with a working React environment within minutes.

The above command creates a new folder named react-tailwind. Navigate to the folder and open it using your preferred text editor.

Next, install Tailwind CSS and configure it to work with the React application.

Use Tailwind CSS in React

Install Tailwind CSS and its dependencies with this command:

PostCSS uses JavaScript plugins to make CSS compatible with most browsers. It checks the browser the application is running in and determines the polyfills needed to make your CSS work seamlessly. Autoprefixer is a PostCSS plugin that uses values from caniuse.com to automatically add vendor prefixes to CSS rules.

Initialize Tailwind CSS

Run the tailwind init command to generate Tailwind CSS default configuration files.

This creates tailwind.config.js in the root folder which stores all of Tailwind’s configuration files and contains the following:

Configure Template Paths

You need to tell Tailwind CSS the files it should check to see what CSS classes are being used. This allows Tailwind to identify and remove the unused classes and therefore reduces the size of the CSS generated.

In tailwind.config.js, add the template paths under the content key.

Inject Tailwind CSS Into React

The next step is to include Tailwind CSS in the application using @tailwind directives.

Delete everything in index.css and add the following to import the base styles, components, and utilities.

Finally, make sure index.css is imported in index.js and Tailwind CSS will be ready for use.

Using Tailwind CSS to Style a React Component

You will create the simple web page below and style it using Tailwind’s utility classes.

This page contains two main sections: a navigation bar, and the hero section (which has a heading and a button).

To illustrate how Tailwind CSS makes writing CSS easier, try styling the web page using plain CSS and Tailwind CSS.

Get started by modifying the App.js in the src folder to remove the unnecessary code.

Next, add the web page content to App.js.

To use plain CSS, add the CSS to App.css.

With Tailwind CSS, you don’t need to write the CSS rules for each class. Instead, you use utility classes. These are classes scoped to a single CSS property. For instance, if you want to create a button with a black background and white text color, you need to use the bg-black and text-white utility classes.

App.js should look like this.

You don’t need to import App.css since the styles generated by Tailwind CSS are stored in index.css which you imported in index.js earlier.

Compared to plain CSS, this approach results in less code that is easy to understand.

Code in Style With Tailwind CSS

In this article, you learned about Tailwind CSS, its strengths, disadvantages, and how you can use its utility classes in React applications. Apart from classes, Tailwind CSS also offers other additional features including the ability to create responsive layouts and reusable components.

But, as we mentioned earlier, Tailwind is far from the only CSS framework on the market. Which will you use for your next project?