How to use Tailwind CSS in React to configure Create React App?

Handsome

I'm very new to use tailwindcss with react app. I've following the guide from tailwindcss but it was not well and also give lots of buggy. If anyone have idea to start up projects using tailwind and react, please share your experience.

Thanks!

Ttenochtchi Bush

That's good questions. In my experience, I've started using React boilerplate project. First, open your terminal and type the following commands to create a new project.

#using NPX
npx create-react-app tailwindreact-app

#using NPM
npm init react-app tailwindreact-app

#using yarn 
yarn create react-app tailwindreact-app

create-react-app is the official React build tool for scaffolding new React projects.

Go to your app directory

cd tailwindreact-app

Next, install Tailwind and its dependencies

#using npm
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

#using Yarn
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 -D 

Create React App does not support PostCSS 8 yet, so we need to install the version of PostCSS7 that is compatible with Tailwind CSS v2

Next, we need to install CRACO to configure Tailwindcss

#using npm
npm install @craco/craco

#using Yarn
yarn add @craco/craco

First, create a CRACO configuration file in your base directory, either manually or using the following command:

touch craco.config.js

Next, add tailwindcss and autoprefixer as PostCSS plugins to your CRACO config file:

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

Configure your app to use craco to run development and build scripts.

Open your package.json file and replace the content of scripts with:

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }

Create the default configurations scaffold:

npx tailwindcss init

This command creates a tailwind.config.js in your project’s base directory. The file houses all of Tailwind’s default configuration. We can also add an optional --full flag to generate a configuration file with all the defaults Tailwind comes with.

Including Tailwind in your CSS

Inside your src folder create a folder named styles. This is where all your styles will be stored.

Inside that folder, create a tailwind.css and an index.css file.

The index.css file is where we’ll import tailwind’s base styles and configurations. tailwind.css will contain the compiled output of the index.css.

Tailwind CSS components, utilities, and base styles

Add the following to your index.css file.

//index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

``@tailwind is a tailwind directive that is used to inject default base styles, components, utilities and custom configurations.

@tailwind base **injects Tailwind’s base styles, which is a combination of Normalize.css and some additional base styles.

@tailwind components injects any component (small reusable styles such as buttons, form elements, etc.) classes registered by plugins defined in your tailwind config file.

Below the component import is where you would add any of your custom component classes — things that you’d want to be loaded before the default utilities so the utilities could still override them.

Here’s an example:

.btn { ... }
.form-input { ... }

@tailwind utilities injects all of Tailwind’s utility classes (including the default and your utilities), which are generated based on your config file.

Below the utilities import is where you would add any custom utilities you need that don’t come out of the box with Tailwind.

Example:

.bg-pattern-graph-paper { ... }
.skew-45 { ... }

Tailwind swaps all these directives out at build time and replaces them with the CSS generated.

Configure your app to build your CSS file To configure your app to use CRACO to build your styles every time you run the npm start or yarn start command, open your package.json file and replace the content of scripts with:

 "scripts": {
    "build:style": "tailwind build src/styles/index.css -o src/styles/tailwind.css",
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

To import your CSS to the app, open your index.js file and import your Tailwind styles:

import './styles/tailwind.css';

Delete the index.css and app.css files in your projects root directory and remove their corresponding import statements in the Index.js and App.js files, respectively.

Your index.js file should look similar to this:

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/tailwind.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

That's all. I hope my experience will help others.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How do you configure Create React App to use CSS Blocks?

Tailwind CSS not displaying using Create React App

React App adding Pure CSS to Tailwind CSS

Tailwind CSS not loading custom classes on React app

Tailwind CSS does not work with React App

Tailwind CSS does not work with react app - no affect

How to use css modules with create-react-app?

How to use Sass and CSS Modules with create-react-app?

How to use Create react app to install React

Navbar in React and Tailwind CSS

Tailwind CSS how to style a href links in React?

How to align the color with React and tailwind.css

How to configure Workbox in Create-React-App based app?

How to change the primary color of the app from app's UI in React JS(Next JS) using tailwind CSS

How to use scss variables in create react app?

"SyntaxError with Tailwind CSS in React app: 'font' class does not exist. How to resolve?"

Create a circular Progress Bar using tailwind css in react

How do you configure a react app to use typescript?

How can I use tailwind-css to style the active state of the Navlink(react-router-dom)?

Tailwind classes not rendering in react app

Configure ESLint rules in create-react-app?

How can I configure create-react-app to create an app with classes and not functions?

Configure a Create-React-Native-App project to use MobX and use Babel to enable decorators

How to configure Django with Webpack/React using create-react-app on Ubuntu server

How do I transition background color with Tailwind CSS in React?

How to apply Tailwind CSS breakpoints in style object in JSX / React?

How can I stabilize floating labels in React using Tailwind CSS?

how to use calc() in tailwind CSS?

How to use SCSS with Tailwind css?