在 React 17.0 使用 Tailwind CSS UI 框架

React
, ,

做法

建立專案。

1
2
npm create vite@latest my-project -- --template react
cd my-project

安裝依賴套件。

1
npm install -D tailwindcss postcss autoprefixer

初始化專案，建立 tailwind.config.js 設定檔。

1
npx tailwindcss init -p

修改 tailwind.config.js 檔。

1
2
3
4
5
6
7
8
9
10
module.exports = {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

修改 src/index.css 檔，添加 @tailwind 裝飾器。

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

在元件中使用。

1
2
3
4
5
6
7
8
9
10
11
import './App.css';

function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello, World!
    </h1>
  );
}

export default App;

啟動服務。

1
npm run dev

參考資料