01月
06

发表于 • 字数统计 3199 • 被 8 人看爆

##2024/9/20 20:46:52:

build tailwind css 项目

tailwind 是一个工具类的包，本项目利用 postcss tialwind 把源文件中的 html css中使用的 tailwind 语法的 css, 以及自定义的 css统一打包到新的 css 文件中。方便 html 使用。

项目地址：

https://github.com/qyzhizi/js-logical/tree/main/2024-09-20-tailwind-postcss
解释

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

content: ["./src/**/*.{html,js}"] 这行代码在 tailwind.config.js 文件中指定了 Tailwind CSS 应该扫描的文件路径。具体来说，它会递归地查找 src 目录及其所有子目录下的所有 .html 和 .js 文件。
Tailwind CSS 通过扫描这些文件来识别其中使用的类名，从而生成相应的 CSS 样式。因此，确保所有包含 Tailwind 类名的文件都被包括在内是非常重要的，以便 Tailwind 能够生成所需的 CSS

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

这是 postcss 的配置，其中使用了两个插件 tailwindcss autoprefixer ，tailwindcss 自然是 tailwind 插件 处理与 tailwind 相关的语法，而 autoprefixer 是自动设置一些 css 前缀的，有些实验性的 css 还没有成为标准，但是有些浏览器已经支持了，每个浏览器有自己特定的前缀，所有需要这个插件进行自动处理，提高代码的兼容性。

  "scripts": {
    "build": "postcss src/styles.css -o dist/styles.css",
  },

package.json 包含上面这部分代码，postcss src/styles.css -o dist/styles.css 表示构建的命令，其中 src/styles.css 是额外的 css 文件，dist/styles.css 是最终的 css 文件，包括从 html js 文件中收集而来的 css 格式

构建并运行：

qy@QY [20:45:23] [~/Documents/git_rep/js-logical/2024-09-20-tailwind-postcss] [main *]
-> % npm run build       

> tailwind-postcss-example@1.0.0 build
> postcss src/styles.css -o dist/styles.css


qy@QY [20:46:00] [~/Documents/git_rep/js-logical/2024-09-20-tailwind-postcss] [main *]
-> % npx http-server dist
Starting up http-server, serving dist

http-server version: 14.1.1

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://127.0.0.1:8080
  http://172.20.10.2:8080
Hit CTRL-C to stop the server

已有的 css 文件 通过 tailwind 一起进行打包

要将已有的 CSS 文件与 Tailwind CSS 一起打包，可以按照以下步骤进行配置：

@@@ 1. 安装必要的依赖

确保你的项目中已经安装了 Tailwind CSS 和 PostCSS。可以使用以下命令进行安装：

npm install -D tailwindcss postcss autoprefixer

@@@ 2. 创建配置文件

在项目根目录下创建 postcss.config.js 和 tailwind.config.js 文件。

@@@@ postcss.config.js 示例：

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
}

@@@@ tailwind.config.js 示例：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"], // 指定要扫描的文件
  theme: {
    extend: {},
  },
  plugins: [],
}

@@@ 3. 创建 CSS 文件

在你的 CSS 文件中，导入 Tailwind 的基础样式，并在其后添加你的自定义样式。例如，创建一个名为 styles.css 的文件：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* 在这里添加你的自定义样式 */
.custom-class {
  background-color: #f0f0f0;
}

@@@ 4. 打包 CSS

使用 PostCSS 来处理你的 CSS 文件。可以通过命令行运行以下命令，将处理后的 CSS 输出到指定位置：

npx postcss src/styles.css -o dist/styles.css

@@@ 5. 使用生成的 CSS

在你的 HTML 文件中引入生成的 dist/styles.css 文件，以便在页面中使用 Tailwind 和你自定义的样式。

@@@ 注意事项

  • 确保在 tailwind.config.js 中的 content 配置包含所有可能使用 Tailwind 类名的文件路径。
  • Tailwind 会根据你在 HTML、JavaScript 和其他指定文件中使用的类名生成相应的样式，因此确保这些文件都被包含在内。

通过以上步骤，你可以将已有的 CSS 文件与 Tailwind 一起打包，并利用 Tailwind 的强大功能来优化和扩展你的样式。

Citations:
[1] https://www.w3cschool.cn/tailwind_css/tailwind_css-u2gz3p8u.html
[2] https://blog.csdn.net/xgangzai/article/details/129891380
[3] https://developer.aliyun.com/article/1206951
[4] https://www.cnblogs.com/kitebear/p/17413819.html
[5] https://wenku.csdn.net/answer/en7prcs0rr
[6] https://tailwind.nodejs.cn/docs/installation/using-postcss
[7] https://www.geekster.in/articles/content-configuration-in-tailwind/
[8] https://michaeljier.cn/blog/diving-into-tailwindcss

分享到：