tailwindcss本地构建

nciaer

发布于 1 个月前

tailwind

css

所谓本地构建，其实就是不再直接引用cdn里的东西，豆包生成的代码很多都是如下格式：

<script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        danger: '#EF4444',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            }
            .transition-transform {
                transition-property: transform;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 300ms;
            }
            .hover-scale {
                @apply hover:scale-110 transition-all duration-300;
            }
            .choice-btn {
                @apply flex flex-col items-center justify-center p-4 rounded-xl bg-white shadow-lg hover-scale cursor-pointer border-2 border-transparent hover:border-primary active:scale-95;
            }
            .result-animation {
                animation: pulse 1s ease-in-out;
            }
            @keyframes pulse {
                0%, 100% { transform: scale(1); }
                50% { transform: scale(1.1); }
            }
            .tab-active {
                @apply text-primary border-primary font-medium;
            }

            .stat-card {
                @apply bg-white rounded-xl shadow-md p-5 transition-all duration-300 hover:shadow-lg;
            }
            .history-item {
                @apply flex flex-col md:flex-row justify-between items-start md:items-center p-3 border-b border-gray-100 last:border-0 hover:bg-gray-50 rounded-lg transition-colors duration-200;
            }
        }
    </style>

简单是简单，但是很多用户可能会无法访问？，所以还是本地构建下更可靠一点。

首先电脑上得安装npm，然后进入项目目录，执行

npm init -y # 快速初始化一个 Node.js 项目的 package.json 文件，不用填写信息

安装tailwindcss
```
npm install -D tailwindcss@3
```
@3是必须的，可能npm里最新版是4了，而项目里用的3，构建方式不同，所以安装3.x版本
-D是--save-dev的缩写，表示把这个包添加到package.json的开发依赖部分devDependencies，开发依赖是指那些仅在开发过程中需要使用的工具或库，如果没有这个选项，这会添加到dependencies部分，具体干啥的，目前不清楚。
生成tailwindcss配置文件
```
npx tailwindcss init -p
```
npx是npm内置的包执行工具，用于临时调用安装在项目中的工具（无需全局安装）
-p：--postcss 的缩写，会同时生成 PostCSS 配置文件
执行后，会生成2个文件tailwind.config.js和postcss.config.js,postcss.config.js目前用不到，主要是配置tailwind.config.js文件，默认内容是：
```
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
```
content是用来指定扫描路径，多个路径用逗号分隔，如['./template/*.htm']
theme里得extend对应htm里的相应部分，直接复制进去就行，最后tailwind.config.js文件内容是：
```
/** @type {import('tailwindcss').Config} */
module.exports = {
safelist: [ //强制保留这些类名
'grid-cols-3',
'grid-rows-3',
'grid-cols-4',
'grid-rows-4',
'grid-cols-5',
'grid-rows-5',
],
content: ['./template/*.htm'],
theme: {
extend: {
  colors: {
    primary: '#165DFF',
    secondary: '#36CFC9',
    success: '#52C41A',
    warning: '#FAAD14',
    danger: '#FF4D4F',
    dark: '#1F2937',
    light: '#F9FAFB'
  },
  fontFamily: {
    inter: ['Inter', 'system-ui', 'sans-serif'],
  },
},
},
plugins: [],
}
```
这次文件里多了个safelist配置项，因为我有些css类名是php输出的，扫描不到，所以强制写上去。

配置Tailwind 入口 CSS文件
手动创建个input.css,然后里面内容是

/* 导入 Tailwind 核心层（必须在自定义层之前） */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* 定义自定义工具类层，就是htm里的@layer utilities部分 */
@layer utilities {
.content-auto {
    content-visibility: auto;
}

.gesture-point {
    @apply w-6 h-6 rounded-full bg-white border-2 border-primary transition-all duration-200 shadow-md;
}

.gesture-point-active {
    @apply bg-primary border-primary scale-110;
}

.gesture-point-success {
    @apply bg-success border-success scale-110;
}

.btn-appear {
    animation: fadeInUp 0.5s ease forwards;
}

.pulse-effect {
    animation: pulse 2s infinite;
}

.loading {
    animation: spin 1s linear infinite;
}
}
/*其它css定义*/
@keyframes fadeInUp {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
@keyframes pulse {
0% {
    box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.4);
}
70% {
    box-shadow: 0 0 0 8px rgba(22, 93, 255, 0);
}
100% {
    box-shadow: 0 0 0 0 rgba(22, 93, 255, 0);
}
}
@keyframes spin {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}

配置package.json文件
在package.json的scripts部分添加
```
"dev": "tailwindcss -i ./css/input.css -o ./css/output.css --watch",
"build": "tailwindcss -i ./css/input.css -o ./css/output.css --minify"
```
dev：开发模式，--watch 表示 “实时监听”—— 修改 input.css 或 HTML 文件时，自动重新编译 output.css。
build：生产模式，--minify 表示 “压缩 CSS”（删除空格、注释），生成体积更小的 output.css，用于上线。
-i ./css/input.css：指定入口 CSS 文件路径。
-o ./css/output.css：指定输出 CSS 文件路径（最终引入的本地文件）。
最后
命令行执行npm run dev，会生成未压缩的文件，方便测试
命令行执行npm run build，会生成最终压缩后的文件。

评论区

论坛分类

nciaer

tailwindcss本地构建