Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to install Tailwind CSS

Install Tailwind CSS with Create React App

It is advisable to use Vite, Next.js, Remix or Parcel instead of Create React App in the case of new projects.

1. Create your project;
Using create-react-app, to create a new React project if you don’t have one already.
npx create-react-app my-project
cd my-project

2. Install Tailwind CSS;
Via npm, install Tailwind CSS and its dependencies, later in order to generate tailwind.config.js and postcss.config.js, run the init command.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. Configure your template paths;
In your tailwind.config.js file add all the paths to all your template files.
Module.exports = {
content: [
”./src/**/*.{js,jsx,ts,tsx}”,
],
theme: {
Extend: {},
},
plugins: [],
}

4. Add the Tailwind directives to your CSS;
For each of Tailwind’s layers add the @tailwind directives to your ./src/index.css.file.
@tailwind base;
@tailwind components:
@tailwind utilities:

5. Start your build process.
With npm run start run your build process
npm run start

6. Start using Tailwind in your project.
To style your content, start using Tailwind’s utility classes
export default function App() {
return (

Hello, Let’s start working with tailwind css!

)
}

The post How to install Tailwind CSS appeared first on Sreyas IT.



This post first appeared on Mobile App Development Companies In Kochi | Sreyas IT Solutions, please read the originial post: here

Share the post

How to install Tailwind CSS

×

Subscribe to Mobile App Development Companies In Kochi | Sreyas It Solutions

Get updates delivered right to your inbox!

Thank you for your subscription

×