Css style

Beginner’s Guide to Tailwind CSS in React

Tailwind CSS is a premier utility CSS framework that allows developers to design custom web components without switching to a CSS file. In this tutorial, you will learn how to install Tailwind CSS in React and use it to create a simple React page.

Why use Tailwind CSS?

There are already many CSS frameworks that simplify the way developers design web pages. So why should you use Tailwind CSS?

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

Downwind CSS, however, is a utility framework that gives you creative control to create dynamic components. And unlike Bootstrap, you can easily customize the designs to your liking.

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

Learn more about the differences between Tailwind CSS and Bootstrap in our article on the subject.

Disadvantages of using CSS Tailwind

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

USE VIDEO OF THE DAY

Most developers like to follow the principle of separation of concerns, so 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 drawbacks, Tailwind CSS is a framework you should seriously consider if you’re already comfortable with CSS and want to create designs faster.

Getting Started: Creating a React Project

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

npx create-react-app react-tailwind

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

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

cd react-tailwind

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:

npm install tailwindcss postcss autoprefixer

PostCSS uses JavaScript plugins to make CSS compatible with most browsers. It checks the browser the app is running in and determines the polyfills needed for your CSS to 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 it downwind initialization command to generate CSS Tailwind default configuration files.

npx tailwindcss init

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

module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}

Configure model paths

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

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

module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

Inject Tailwind CSS into React

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

Delete all in index.css and add the following to import the basic styles, components and utilities.

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, make sure index.css is imported into index.js and Tailwind CSS will be ready to 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.


Screenshot of webpage showing navigation menu and hero section

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

To illustrate how Tailwind CSS makes it easier to write CSS, try styling the web page using Simple CSS and Tailwind CSS.

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

import './App.css'
function App() {
return (


);
}
export default App;

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

import "./App.css";
function App() {
return (




Tailwind CSS makes styling React components easier!





);
}

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

nav {
display: flex;
justify-content: space-between;
padding: 16px 36px;
color: #000;
box-shadow: 0px 2px 5px 0px rgba(168, 168, 168, 0.75);
}
.logo {
font-size: 18px;
font-weight: bold;
}
ul {
list-style: none;
display: inline-flex;
}
ul li {
margin-left: 16px;
cursor: pointer;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 64px;
}
h1 {
font-size: 36px;
text-align: center;
}
.btn {
background-color: #000000;
color: #fff;
padding: 10px;
width: fit-content;
margin-top: 36px;
}

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

App.js should look like this.

function App() {
return (




Tailwind CSS makes styling React components easier!





);
}

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

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

Code in style with Tailwind CSS

In this article, you learned about Tailwind CSS, its strengths, its drawbacks, and how you can use its utility classes in React applications. Besides 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?


tailwind-css-vs-bootstrap-featured

Tailwind CSS vs Bootstrap: Which Framework is Better?

Read more


About the Author