Richten Sie Tailwind CSS in einem React JS-Projekt ein

Wenn Sie noch keine React-App haben, erstellen Sie eine:

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

1. Installieren Sie Tailwind CSS Führen Sie den folgenden Befehl aus, um Tailwind CSS und seine Abhängigkeiten zu installieren:

npm install -D tailwindcss postcss autoprefixer

Dann initialisieren Sie Tailwind CSS:

npx tailwindcss init

Dadurch wird eine tailwind.config.js-Datei in Ihrem Projekt erstellt.

1. Konfigurieren Sie Rückenwind Bearbeiten Sie die Datei tailwind.config.js, um die Inhaltspfade zu konfigurieren. Ersetzen Sie den Inhaltsschlüssel durch Folgendes:

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

1. Tailwind-Anweisungen zu CSS hinzufügen Suchen oder erstellen Sie im Ordner src eine Datei mit dem Namen index.css. Fügen Sie die folgenden Tailwind-Anweisungen hinzu:

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

1. CSS in React importieren Stellen Sie sicher, dass index.css in Ihr Projekt importiert wird. In der Datei src/index.js sollten Sie Folgendes haben:

import './index.css';

1. Starten Sie den Entwicklungsserver Führen Sie Ihre React-App aus, um Tailwind CSS in Aktion zu sehen:

npm start

Das obige ist der detaillierte Inhalt vonRichten Sie Tailwind CSS in einem React JS-Projekt ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!