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

秋知德雨个人 2023-9-23 811 9/23

一、安装 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

 

- THE END -

秋知德雨个人

9月23日22:05

最后修改:2023年9月23日
1

非特殊说明,本博所有文章均为博主原创。

共有 0 条评论