Tailwind CSS with React

Introduction

Tailwind CSS is a CSS framework that can be used with React to build beautiful and seamless designs for a website. Tailwind CSS lets you create components that suit what you wish to build and what is required for your project. These components can be easily created by utilizing the utility-first strength of Tailwind CSS with React.

If you are bored of using frameworks and libraries that offer predefined components and do not let you explore your creativity in the designs of your website then you will find Tailwind CSS to be a terrific fit for working on attractive interfaces as you build the designs you require using the utility classes it offers.

What is Tailwind CSS?

Tailwind CSS is a utility-based CSS framework that is designed to make it easier to build web applications quickly with less emphasis on coding custom CSS while yet producing amazing interfaces. It provides you the freedom to be creative when making dynamic components. And unlike other frameworks, you have easy access to design customization.

Another benefit of utilizing Tailwind CSS with React is that it reduces the size of your CSS bundle by eliminating all the unnecessary CSS during the development process (which is different from other frameworks, since it includes all CSS files in the build).

Why Use Tailwind CSS?

Perhaps you haven't been persuaded to accept Tailwind CSS's benefits or you're not quite ready to abandon other CSS frameworks or libraries with React. Therefore, we will be listing down a few reasons why you might want to think about using Tailwind CSS in your application shortly.

No Naming Conventions

Naming classes is one of the most difficult aspects of designing custom CSS. You are constantly debating whether a class should be broad or particular. How do you set them up so they are cascaded? Tailwind CSS elegantly resolves these issues by offering universally applicable utility-based classes.

However, there may be situations in which you must name specific classes. This occasionally happens when you need to separate specific components so that you can use them (with the aid of the @apply directives) later in your design.

Cache Benefits

While using the traditional CSS frameworks, we always need to change the CSS files every time even if we make small in our website design. However, using Tailwind CSS makes your work easier by not bothering you to make changes in the CSS files as we use the same classes throughout the markup while utilizing Tailwind CSS. As a result, you are no longer required to clear your CSS cache each time you want to make a little modification to your design.

Creating Your React Project

The very first step that needs to be performed for using the tailwind React is to create a React project. Therefore, for creating a react application, we need to write the following command on the terminal.

Therefore, the help of the create-react-app script followed by the application name creates a default react application for the user. The second line changes the directory to the react directory in which our project is present.

This is something that will appear on the terminal if you have successfully created a react app.

Install Tailwind CSS

Now since we have entered our newly formed project folder tailwind-css-example, we can start installing the Tailwind CSS framework and its peer dependencies like autoprefixer and postcss by using the Node Package Manager(NPM).

You need to write the following command in the terminal for the installation of the same.

You will be seeing the below instructions after you have successfully installed the tailwind css and its peer dependencies.

Now, since we have successfully installed the Tailwind React along with its peer dependencies, therefore now is the time for creating the default configuration files for Tailwind CSS.

How to Configure PostCSS?

PostCSS is a Javascript utility that converts your CSS code into an abstract syntax tree and then offers an API for JavaScript plugins to analyze and change it. It is used for performing various functionalities like linting, minifying, inserting vendor prefixes, and many other things. It is used with Tailwind CSS which is also a PostCSS plugin.

To configure the PostCSS, create the PostCSS configuration file in the base directory manually or using the below command.

Now, add the following lines of code to the postcss.config.js file to configure PostCSS into your application.

In the above lines of code, we have first fetched the tailwindcss package and stored it in a variable. After which we wrapped our tailwind.js which is our default base setup, within the tailwindcss. Further, the autoprefixer is fetched.

Why Autoprefixer?

Installing Autoprefixer alongside Tailwind CSS is necessary because it frequently monitors caniuse.com to determine which CSS attributes require prefixing, which means that which particular CSS property is not supported by the browser in which we are working in. As a result, vendor prefixing is not offered by Tailwind CSS.

Auoprefixer allows you to avoid doing repetitive, pointless tasks while writing the CSS code. With the help of this tool, you can stop worrying about writing cross-browser CSS code and simply write regular code. The program will then automatically add vendor prefixes to your code.

Generate Configuration Files

We require two configuration files in our React project to configure everything we need for Tailwind React:

• tailwind.config.js
• postcss.config.js

These configuration files help us to interact with the project and customize everything. Both these configuration files can easily be generated by executing the following command into the terminal.

The below result will appear if the configuration files are successfully generated.

Configure Path to Template Files

We must add the paths of all the template files in the tailwind.config.js file as these template files include HTML templates, javascript files, and other source files that contain Tailwind class names.

The tailwind.config.js file initially looks like the below:

We need to add the below configuration setting in the content section.

This configuration setting makes sure that all the template files with file extensions js, jsx, ts, and tsx are covered within the src subfolder. It makes sure that vanilla CSS is generated for each of the corresponding elements.

Add Tailwind Directives

Tailwind directives are specific declarations that only work with Tailwind and tell CSS how to act. The addition of directives is required for three of Tailwind's layers. They are required to add Tailwind CSS into our React application using the @tailwind directive.

The three tailwind directives are as follows:

• @tailwind base;
  This adds the base styles for Tailwind, which are a combination of Normalize.css and several other base styles.
• @tailwind components;
  This adds any component (reusable styles like cards and form elements, etc) classes registered by plugins depending on the config file.
• @tailwind utilities;
  This adds all of Tailwind's utility classes, including the standard ones and any custom ones that you may have created based on the configuration file.

You must note that we have used the @tailwind directive to inject Tailwind’s base, components, and utilities styles into our CSS. All these are added in the index.css file. Delete everything already present in the index.css file and then add these directives to import the base, component, and utilities styles into your application.

Use Tailwind CSS in Your React App

Now, let us see how to use this tailwind react in your react application with all the setup that we have done so far.

We will be simply making a card-like component that has something written on it using the tailwind CSS styling. Therefore, for adding the tailwind react to the react application, simply write the below code into your App.js file.

Output:

Explanation:

As you can see in the above output, we have added the code in our App component and have written the styling directly with the className attribute. We have wrapped the two texts inside a container that has rounded corners, some padding, margins, shadow, and a gray background. Inside which we have added the texts which have some margins, text colors, and text sizes.

When Not to Use Tailwind CSS?

If you are thinking that you can use this tailwind framework in every project then the answer would be a No! Therefore, there are a few situations in which Tailwind CSS might not be the best choice. We have discussed them below.

If You are Working on a Small Project

Tailwind CSS is not the ideal choice when you need to start with a mini-project that has a very short deadline (particularly something that only a few users or you would utilize). In those situations, I suggest switching to another framework, such as Bootstrap, Foundation, or any other. This is because they provide predefined, usable components (themes to get started with) which for tailwind CSS, you need to create your own.

For a CSS Beginner

It's advisable to be familiar with CSS before digging into Tailwind CSS for any project. Beginners should first have a basic understanding of CSS before using Tailwind CSS for web-based applications. Only those with a thorough understanding of CSS may readily get along with it because it offers utility classes that are closely related to the underlying CSS.

If You Don't Like Adding Many Classes to Your HTML Elements

Tailwind react forces you to constantly create a large number of classes, which makes your HTML codebase appear cluttered and occasionally challenging to comprehend. Therefore, if you wish to keep your codebase organized then you should consider using some different CSS frameworks like Bootstrap instead of Tailwind CSS.