【tailwind 3.0】如何开始使用Tailwind CSS新建一个项目

一、安装 Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

二、配置

新建目录：

dist

----> main.css

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

src

1.tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

2.配置postcss.config.js：

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
  }

3.配置package.json：

{
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.23",
    "tailwindcss": "^3.3.2"
  },
  "scripts": {
    "build": "tailwindcss -i ./src/main.css -o ./dist/style.css --watch"
  }
}

三、在src目录下运行

npm run dev