How to add Tailwind CSS to an existing react project

TailwindCSS
Wednesday, June 10, 2020

How to add taillwindcss to an existing React project

Go to directory of your React project and use yarn or npm to add taillwindcss postcss-cli autoprefixer

Using yarn

1yarn add tailwindcss postcss-cli autoprefixer -D

Then type this command in the terminal to create the default configuration

1npx tailwind init tailwind.js --full

A taillwind.js file is created in the current directory

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override

Create a postcss.config.js file

1touch postcss.config.js
1const tailwindcss = require('tailwindcss');
2module.exports = {
3 plugins: [
4 tailwindcss('./tailwind.js'),
5 require('autoprefixer')
6 ],
7};

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.

Create an assets directory in the src folder

1mkdir ./src/assets

Create a file called taillwind.css in ./src/assets

1touch ./src/assets/tailwind.css

Type in tailwind.css:

1@import "tailwindcss/base";
2
3@import "tailwindcss/components";
4
5@import "tailwindcss/utilities";

Modify the package.json file as follows:

1"scripts": {
2 "start": "yarn watch:css && react-scripts start",
3 "build": "yarn build:css && react-scripts build",
4 "test": "react-scripts test",
5 "eject": "react-scripts eject",
6 "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
7 "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
8 },

A file called main.css will be generated each time we start the application

Then import the file ./src/assets/main.css in the App.js file (or the root file of the application)

1import React from "react";
2import ReactDOM from "react-dom";
3import './assets/main.css';
4import App from "./App";
5ReactDOM.render(<App />, document.getElementById("root"));

Subscribe to our Newsletter

We deliver high quality blog posts written by professionals monthly. And we promise no spam.

elitizon ltd.

© 2020 elitizon ltd. All Rights Reserved.