Getting Started
First, create a React project with create-react-app:
npx create-react-app react-tailwindcss
if Create React App version < 5.0:
npx create-react-app@latest react-tailwindcss
or
npx create-react-app@5.0.0 react-tailwindcss
Install TailwindCSS
Install the dependencies required for Tailwind CSS:
npm install -D tailwindcss postcss autoprefixer
Next, generate your config tailwind.config.js
file for your project using the Tailwind CLI utility included when you install the tailwindcss
npm package:
npx tailwindcss init
It will have the following content:
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
Use the -p flag if you’d like to also generate a basic postcss.config.js file alongside your tailwind.config.js file:
npx tailwindcss init -p
This will generate a postcss.config.js
file in your project that looks like this:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
First, we’ll change the content
key in tailwind.config.js
:
content: ["./src/**/*.{js,jsx,ts,tsx}"],
Include Tailwind in your CSS
Use the @tailwind directive to include Tailwind’s base, components, and utilities styles, replacing the original file contents:
@tailwind base;
@tailwind components;
@tailwind utilities
Let’s start the server now. Run the following command:
npm start
You can view a demo of the website we’re creating here
Top comments (0)