在 React JS 專案中設定 Tailwind CSS

如果您還沒有 React 應用程序，請建立一個：

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

1. 安裝 Tailwind CSS 執行以下命令安裝 Tailwind CSS 及其依賴項：

npm install -D tailwindcss postcss autoprefixer

然後初始化 Tailwind CSS：

npx tailwindcss init

這將在您的專案中建立一個 tailwind.config.js 檔案。

1. 設定 Tailwind 編輯 tailwind.config.js 檔案以配置內容路徑。將內容密鑰替換為以下內容：

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

1. 將 Tailwind 指令加入 CSS 在 src 資料夾中，找到或建立一個名為 index.css 的檔案。新增以下 Tailwind 指令：

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

1. 在 React 中匯入 CSS 確保將index.css匯入到您的專案中。在 src/index.js 檔案中，您應該具有：

import './index.css';

1. 啟動開發伺服器 運行你的 React 應用程式來查看 Tailwind CSS 的實際效果：

npm start

以上是在 React JS 專案中設定 Tailwind CSS的詳細內容。更多資訊請關注PHP中文網其他相關文章！