Sediakan CSS Tailwind dalam Projek JS React

Jika anda belum mempunyai apl React, buat satu:

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

1. Pasang Tailwind CSS Jalankan arahan berikut untuk memasang Tailwind CSS dan kebergantungannya:

npm install -D tailwindcss postcss autoprefixer

Kemudian mulakan CSS Tailwind:

npx tailwindcss init

Ini akan mencipta fail tailwind.config.js dalam projek anda.

1. Konfigurasikan Tailwind Edit fail tailwind.config.js untuk mengkonfigurasi laluan kandungan. Gantikan kunci kandungan dengan yang berikut:

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

1. Tambahkan Arahan Tailwind pada CSS Dalam folder src, cari atau cipta fail yang dipanggil index.css. Tambahkan arahan Tailwind berikut:

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

1. Import CSS dalam React Pastikan index.css diimport ke dalam projek anda. Dalam fail src/index.js, anda sepatutnya mempunyai:

import './index.css';

1. Mulakan Pelayan Pembangunan Jalankan apl React anda untuk melihat Tailwind CSS beraksi:

npm start

Atas ialah kandungan terperinci Sediakan CSS Tailwind dalam Projek JS React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!