create-react-app(cra): CRA5.0与tailwindcss的使用/create-react-app

Setting up Tailwind CSS in a Create React App project.
更新于: 2023-09-12 13:27:41

简单开始项目

npx @jswork/cra-tailwind-init

创建cra项目

npx create-react-app . --use-npm --template typescript

安装tailwindcss

npm i -D tailwindcss

初始化tailwindcss的配置

npx tailwindcss init

修改配置

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

添加 src/index.css

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

使用tailwindcss

src/App.tsx

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

参考