【React】react项目安装tailwindcss

努力挣钱的小鑫2024-09-03 22:29

创建React项目

首先,如果您还没有React项目,可以使用以下命令创建一个新项目:

bash 复制代码

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

安装Tailwind CSS

接下来,按照以下步骤安装Tailwind CSS:

安装必要的依赖:

bash 复制代码

npm install -D tailwindcss postcss autoprefixer

初始化Tailwind配置:

bash 复制代码

npx tailwindcss init -p

这将生成两个文件:tailwind.config.js和postcss.config.js。

配置Tailwind

编辑tailwind.config.js文件,添加要扫描的模板路径:

javascript 复制代码

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

更新postcss.config.js文件:

javascript 复制代码

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

启用Tailwind

在src/index.css(或src/App.css)文件中导入Tailwind:

css 复制代码

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

在src/index.js文件中更新index.js,将App.css导入到index.js:

javascript 复制代码

import './App.css';

运行开发服务器

运行开发服务器来测试Tailwind是否正常工作:

bash 复制代码

npm start

测试Tailwind CSS

在App.jsx文件中添加以下代码来测试Tailwind是否正常工作:

js 复制代码

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

export default App;