一篇文章看懂Tailwindcss+如何自定义前缀？

一、CDN引用tailwindcss如何加前缀？

最近要做一些东西，突然发现了tailwindcss，于是按照引用的方式使用了脚本引用。

</script><script src="https://cdn.tailwindcss.com/3.3.3"></script>

但是发现了一个很严重的问题，会和当前样式冲突，于是想着说怎么才能避免冲突。最后发现仅需要在引用的时候声明一个config即可，非常方便。

<script>
  tailwind.config = {
    prefix: 'zk-',
    theme: { extend: { colors: { brand: '#ff0000' } } }
  }
</script>

但此时还没有意识到，Tailwindcss和以往的css不一样。

二、构建自定义前缀的Tailwindcss

在看官网文档的时候，发现需要npm一堆东西，还有一堆配置，深觉麻烦。搜索了一堆文章，发现都没说明白的。

只能看官方文档，但是仔细看完后，才发现他和传统css框架完全不一样。

其实 Tailwind 的部署逻辑看似复杂，核心是为了实现 “按需生成 CSS”，和node编译时Tree Shaking（摇树优化）一样的逻辑

换句话说，部署后，根据检测的文件，自动生成使用的css，极大的缩减了css的体积。所以，Tailwind 实现了 “扫描文件→只生成用到的样式” 来减少体积的方法。

那么如何干呢？由于飞牛nas上正好安装了1panel也支持node，于是想都没想就开始整。

21.创建目录

首先在没有安装node的时候，没法使用npm，只能手动创建目录。

/opt/1panel/docker/tailwindcss/
├── package.json
├── tailwind.config.js       # 核心配置（前缀+多页面扫描）
├── postcss.config.js
├── src/
│   ├── input.css            # Tailwind入口（@tailwind指令）
├── dist/
│   ├── output.css           # 生成的最终CSS（所有页面共用）
└── pages/                   # 多页面存放目录
    ├── index.html           # 首页
    ├── about.html           # 关于页
    ├── contact.html         # 联系页
    └── ...                  # 其他页面

2.2创建package.json

这是一个精简的配置，用于在1panel中部署node的时候用。

{
  "name": "tailwind-multi-page",
  "version": "1.0.0",
  "scripts": {
    "build": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify",
    "watch": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
    "start": "npx http-server . -p 3000"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.3.3"
  }
}

• --watch：开发时用，修改 HTML 或 CSS 后自动重新生成output.css，不用手动执行命令。
• --minify：生产环境用，压缩 CSS 文件体积。

2.3 tailwind的配置文件tailwind.config.js

这个配置文件定义了生成css增加的前缀和扫面的目录。

// tailwind.config.js
module.exports = {
  prefix: 'zk-', // 增加前缀
  content: ["./pages/**/*.html"], // 扫描pages目录下所有HTML
  theme: {
    extend: {},
  },
  plugins: [],
}

2.4 src/input.css中声明输入 的CSS

@tailwind base;    // 基础样式（如默认标签样式）
@tailwind components;  // 组件样式（可自定义）
@tailwind utilities;   // 工具类（核心功能，如text-3xl、font-bold等）

2.5让 PostCSS 识别 Tailwind（备用）

当需要使用postcss的时候用，实测可以不要。

module.exports = {
  plugins: {
    tailwindcss: {}, // 启用Tailwind作为PostCSS插件
    autoprefixer: {}, // 启用自动补全前缀
  }
}

至此准备工作就OK了，直接在1panel中创建node项目即可。

2.6如何使用

直接将写好的页面放到page下，就可以生成css到dist/output.css，具体使用，看的启动命令是watch还是minify。至此一个tailwind生成环境就整好了，以后如果写这种东西就能直接扔进去生成自定义的css了。