React Tailwind CSS

Using Tailwind CSS in a React project is a very popular choice because it provides a utility-first approach to writing CSS, allowing you to apply styles directly in class names. This method makes styling more concise and intuitive.

Tailwind CSS Tutorial:https://www.example.com/tailwindcss/tailwindcss-tutorial.html

Tailwind CSS Official Website:https://tailwindcss.com/

GitHub address:https://github.com/tailwindlabs/tailwindcss

Tailwind CSS is a powerful CSS framework that makes styling more concise and modular through a utility-first approach. Unlike traditional class-based CSS frameworks, Tailwind provides a set of low-level utility classes that can be used directly on HTML elements to quickly and flexibly build custom designs.

The following are the detailed steps for using Tailwind CSS in a React project.

1. Install Tailwind CSS

If you are creating a new React project from scratch, you can use create-react-app. If you already have an existing React project, you can skip the project creation step.

Create a new React project:

npx create-react-app my-app
cd my-project

Install Tailwind CSS

Run the following command in your project directory to install Tailwind CSS and its required dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This will create a tailwind.config.js file and a postcss.config.js file.

Your project structure should look similar to the following:

my-app/
├── node_modules/
├── public/
├── src/
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   └── ...（其他文件）
├── .gitignore
├── package-lock.json
├── package.json
├── postcss.config.js
└── tailwind.config.js

2. Configure Tailwind CSS

Edit the tailwind.config.js file to configure Tailwind to purge unused styles. Update the content array to include all your template file paths:

Example

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Add Tailwind's base styles

In your project, open the src/index.css file and add the following content to include Tailwind's base styles, component styles, and utility styles:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Use Tailwind CSS to write styles

Now you can start using Tailwind CSS class names in your React components to write styles.

App.js file code:

import React from 'react';

const App = () => {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white p-8 rounded-lg shadow-lg">
        <h1 className="text-2xl font-bold text-gray-900">Hello, EXAMPLE!</h1>
        <p className="mt-4 text-gray-600">Example Tutorial: What you learn is not only technology, but also dreams!</p>
        <button className="mt-6 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
Click me to try
        </button>
      </div>
    </div>
  );
};

export default App;

Make sure your src/index.js file correctly imports the App component and renders it into the DOM.

src/index.js file code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Run:

npm start

Then open your browser and navigate to http://localhost:3000. You should see a simple React app styled with Tailwind CSS.

Through the above steps, you have successfully integrated Tailwind CSS into your React project and used it to write styles. Tailwind CSS's utility class names allow you to quickly add styles to your components while keeping your style code concise and modular.

Other Extensions