普通 html 项目引入 tailwindcss

梦想与想象-广州大智汇2025-05-05 18:07

项目根目录安装依赖

复制代码

npm install -D tailwindcss@3 postcss autoprefixer

初始化生成tailwind.config.js

复制代码

npx tailwindcss init

修改tailwind.config.js

复制代码

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html"], //根据自己的项目写
  theme: {
    extend: {},
  },
  plugins: [],
}

package.json 增加如下代码

复制代码

  "scripts": {
    "build": "npx tailwindcss build styles.css -o output.css"
  }

最终效果

复制代码

{
  "devDependencies": {
    "autoprefixer": "^10.4.21",
    "postcss": "^8.5.3",
    "tailwindcss": "^3.4.17"
  },
  "scripts": {
    "build": "npx tailwindcss build styles.css -o output.css"
  }
}

执行命令生成 css

复制代码

npm run build
或者
npx tailwindcss -i ./styles.css -o ./output.css --watch

html 引入 css

复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 
    <!-- 引入 tailwind -->
    <link rel="stylesheet" href="/output.css" />
  </head>

  <body>

   </body>
</html>

普通 html 项目引入 tailwindcss

项目根目录安装依赖

初始化生成tailwind.config.js

修改tailwind.config.js

package.json 增加如下代码

执行命令生成 css

html 引入 css

项目目录