How To Use Tailwind CSS With React!

Why this topic?

CSS can be quite a challenge for anyone new or experienced working on their front-end applications. It is one thing to code out a functioning, easy-to-use application but it is another story to have a application that is appealing to the eye. Unfortunately, the general public is subject to the practice of judging a book by it's cover and if the cover does not scream pretty, then the public loses interest. Software engineers can express their artistic visions through CSS but the how is always the question and the question can only find its answers through ones' tool. One of the tools that can help ease the pain and process of creating a design is Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework which makes it very easy to apply great styling to your React web application by choosing from the framework’s ready-made CSS classes. Tailwind CSS is quite popular among today's CSS frameworks and is used by known tech companies such as Twitch, Coursera, and Shopify. The approach that Tailwind CSS offers speeds up the styling process significantly and in setting up comprises only very few steps.

THE TUTORIAL

Creating Your React Project

Since React is the example that is being used today, the very first step will be creating a React project. The way to do is to use the create-react-app script on the command line:

$ npx create-react-app a-react-app-with-tailwind
$ cd react-app-with-tailwind

The following output after running the create-react-app script via the npx command should look something like this:

Install Tailwind CSS

After having entered the newly created project folder a-react-app-with-tailwind, we can now add the Tailwind CSS library and it's dependencies postcss and autoprefixer by using NPM (Node Package Manager) in the following way:

$ npm install -D tailwindcss postcss autoprefixer

Generate Configuration Files

The next step is to create default configuration files for Tailwind in the project folder and in order to configure everything we need for Tailwind, we will need the following two configuration files:

tailwind.config.js
postcss.config.js

These files can be generated by executing the following command in the project folder:

$ npx tailwindcss init -p

This command, on top of creating the files, makes it so the default configuration structure is already available in said files.

Configure Path To Template Files

Inside tailwind.config.js, we need to specify the path to our React template. This can be done by adding the following configuration setting:

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

Paths are configured as glob patterns, patterns that can expand a wildcard pattern into a list of pathnames that match a given pattern, which means it's easy to match all of the content files in a project without a ton of configuration. We use * to match anything except slashes and hidden files, and ** to match zero or more directories. The values between {} are seperated by a comma to match against a list of options. In the example above, the setting is matching all files with a file extenstion of js, jsx, ts, and tsx covered within the src subfolder.

An important thing to note is that these paths are relative to the root of your project, NOT the tailwind.config.js file.

Add Tailwind Directives

Lastly, add the following Tailwind CSS directives into file index.css:

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

Having done that, we can now make use of Tailwind's CSS classes within our main React component in App.js.

LET'S USE TAILWIND CSS!

To see Tailwind CSS in action, let's replace any default code in src/App.js with the following implemenatation:

function App() {
return (
<div className="container mx-auto bg-gray-200 rounded-xl shadow border p-8 m-10">
<p className="text-3xl text-gray-700 font-bold mb-5">
Welcome!
</p>
<p className="text-gray-500 text-lg">
React and Tailwind CSS in action
</p>
</div>
);
}
export default App;

Start the development web server with the following command:

$ npm run start

and you should be able to see the following result in the browser:

In the event that things did not go as smoothly as expected, Tailwind CSS has a dedicated website that can answer any complex or further questions.

In the event that things did go smoothly, it is recommended to use as a reference guide to use Tailwind CSS in all of it's freedom.

That being said, may Tailwind CSS be the proper paint and brush to help you paint out your front-end to match the vision for your application!