Even though the Tailwind Documentation has the steps, but here is all the information in one place just for you to see and get started using Tailwind with React.
Why even use Tailwind?
The utility-first CSS framework Tailwind CSS may be used to swiftly create unique user interfaces. The fact that Tailwind CSS offers a sizable collection of pre-defined CSS classes that may be used to implement widely-used CSS styles, like spacing, typography, and colors, is one justification for using it. This can speed up the process of designing responsively and consistently. In addition, Tailwind CSS is very adaptable and simple to integrate into any project because it was developed using a utility-first approach. It also offers a simple method for implementing responsive design on the website.
Tailwind also has the configuration file tailwind.config.js , in which users can create and add snippets for styles that can later be used as utility classes per the Developer's need.
Setting our React Project using Tailwind
In this blog, we'll be using Vite, there are other front end tooling but the most preferable one is Vite because of it because of it's hot reload, speed and other factors.
Creating our React Project using Vite
npm create vite@latest my-project -- --template react
cd my-project
Installing TailwindCSS
Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.cjs and postcss.config.cjs.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Configuring your Path
Configure your paths and remember to make these changes in your tailwind.config.cjs file.
t('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
Add the Tailwind directives to your CSS
These changes must be made in your index.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
Starting your Development Server
npm run dev
Now you can start using CSS with your React.
Installing the Tailwind Intellisense Extension
For more productivity, you can Install the Extension mentioned below in VS code to get Intellisense and auto suggestion of classes when working on your project.
Happy Tailwind!
