Getting started with Tailwind: How to install Tailwind CSS with Create React App

Like eating your favorite meal for the first time, you are guaranteed to fall in love with the discovery you’re about to make.

Image created by me using Canva

The only reason you still write custom CSS is because you haven’t been introduced to Tailwind. I’m here now and we’re going to change that. I appreciate vanilla CSS and I always thought it was easy until I discovered Tailwind. It’s like the shorthand of custom CSS except it’s so fun and so much cooler.

Introduction to Tailwind CSS

Tailwind CSS is a utility-first CSS framework that makes styling and building web-applications easier and faster without having to leave your HTML. You can combine these low-level utility classes to create custom components without having to write a single line of custom CSS.

Step 1: Installing Create React App

Ensure you have node.js and npm installed on your computer. If you do not, you can download node.js from the website which will include npm.

Once you have node.js and npm installed, install the create react app using the command;

npx create-react-app my-tailwind

For a detailed guide on installing Create React App, refer to my previous article here.

Step 2: Installing Tailwind CSS

Once you’re done installing and setting up you react application, the next step is installing tailwind css.

Note: If you still have your create react app terminal running, you can stop it by pressing Ctrl + C. This will enable you to enter the next commands.

Navigate to your React project folder by using the command;

cd my-tailwind

To install tailwind css, type in the following command;

npm install -D tailwindcss postcss autoprefixer 

The “-D” means you’re installing tailwind as a dev dependency.

The “postcss” means you’re installing tailwind with a built tool that can convert your CSS file to an AST (Abstract Syntax Tree) to help the WebPack understand your code better.

The “autoprefixer” means you don’t have to worry about writing vendor prefixes on your styles ever again.

Step 3: Configure Tailwind CSS

Create your tailwind.config.js file by using this command;

npx tailwindcss init

Did you know that many websites use Tailwind CSS including Netflix Global Top 10, Shopify, OpenAI, Vercel and New York Times Events?

Step 4: Configure PostCSS

Create a ‘postcss.config.js’ file in the root of your project folder and add “tailwindcss” and “autoprefixer” to your file using this syntax

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Step 4: Configure your paths

Add the paths of your files to your tailwind.config file by specifying the file extensions e.g: (.html, .tsx, .jsx) in the content section using this syntax below;

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 5: Add the directives

Tailwind works with layers that can be imported into your main CSS file using the tailwind directives.

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

If you create a new css file (e.g: styles. css) different from the react app.css and index.css, don’t forget to map it into the corresponding file using the command

import ‘./styles.css’;

Step 6: Start your server

Now that you are done installing tailwind.css, start your development server to see tailwind in action by using the command;

npm start

#or for yarn

yarn start

To begin styling with tailwind and to understand it’s coding syntax, check out the utility-first fundamentals on the official website. Practising with the utilities will help you get a hang of them. Tailwind is easy to understand and by the time you’re done, you wouldn’t use CSS any other way.

Don’t forget to have fun while learning🤩. For further contributions or any questions, feel free to connect with me on Twitter.

Until next time, happy coding!