ReactJS with Tailwind CSS

Introduction

This post is about configuring Tailwind css with React Js.

We will start with the setup process. It will be smooth if we follow along as always :P

setup

We will use create-react-app for bootstrapping our application

npx create-react-app my-react-tailwind-project

Install Tailwind via npm

Below command will add tailwind as devdependency for our project.

npm install tailwindcss --save-dev

Create your Tailwind config file

If you'd like to customize your Tailwind installation, you can generate a config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package:

npx tailwindcss init

This will create a file tailwind.config.js at root level of your project and would look like this:

module.exports = {
  theme: {
    extend: {}, // color palette, font stacks, type scale, border sizes, breakpoints, etc.
  },
  variants: {}, //Using utilities to style elements on hover, focus, and more
  plugins: [], //to register third-party plugins with Tailwind
}

Process your CSS with Tailwind

We will add Tailwind as a PostCSS plugin which means we will create a config file postcss.plugin.js and add tailwind as plugin in it.

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

We will also include Autoprefixer to deal with vendor prefixes and use PostCSS-Import to resolve path of an @import rule.

Let's add them first

npm i postcss-cli autoprefixer postcss-import --save-dev

Now, create a config file postcss.config.js at the root level.

const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    require('postcss-import'),
    tailwindcss('./tailwind.config.js'), //since we have a config file for tailwind
    require('autoprefixer'),
  ],
};

As we are going to process our CSS so it will generate a new css file with tailwind css and our css. Now create a folder named css under src folder and place our App.css inside this folder.

Add Tailwind to your CSS

Create a file name tailwind.css under src/css folder

If you're using postcss-import , use imports instead of the @tailwind directive to avoid issues when importing any of your own additional files:

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Then import this file in src/css/app.css

@import './tailwind.css';

Configure Your App To Build Your CSS

Next, we need to configure our project to build our CSS styles each time we run the npm start command.

Now add a script to our package.json to run before we start our app. This will tell PostCSS to generate the css file to be used by our app.

"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/css/app.css -o src/App.css", 
    "watch:css": "postcss src/css/app.css -o src/App.css"
  },

Here, we have added two tasks:

1. build:css ==> it will compile and build your css output into src/App.css
2. watch:css ==> it will watch the css changes and output into src/App.css

Let's add a tailwind class to change the background colour of the default app screen.

<div className="App bg-teal-700"></div>

Now run your app using npm start and check (http://localhost:3000/)
You would notice that it runs the buildCSS command and generates App.css under src folder.
Do remove the default css related to background to see the changes.

Responsive design

To see how responsive design works with tailwind, add this in App.js

<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500">Dummy text</div>

Now check your app in mobile and other breakpoints to see the changes.

As mentioned earlier, it was just about configuring tailwind with react and testing responsive design. I've just started off with Tailwind css so I am yet to build a UI design like a dashboard or a website.

I hope it helps someone who wants to start with Tailwind css.

Cheers !!!