在 React JS 專案中設定 Tailwind CSS-js教程-PHP中文網

在 React JS 專案中設定 Tailwind CSS

Barbara Streisand

發布： 2024-12-16 13:27:18

原創

317 人瀏覽過

Set Up Tailwind CSS in a React JS Project

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

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

登入後複製

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

npm install -D tailwindcss postcss autoprefixer

登入後複製

然後初始化 Tailwind CSS：

npx tailwindcss init

登入後複製

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

設定 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: [],
};

登入後複製

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

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

登入後複製

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

import './index.css';

登入後複製

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

npm start

登入後複製

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