tailwindcss本地构建

所谓本地构建，其实就是不再直接引用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>

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

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

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

2. 安装tailwindcss

   npm install -D tailwindcss@3

   @3是必须的，可能npm里最新版是4了，而项目里用的3，构建方式不同，所以安装3.x版本
   -D是--save-dev的缩写，表示把这个包添加到package.json的开发依赖部分devDependencies，开发依赖是指那些仅在开发过程中需要使用的工具或库，如果没有这个选项，这会添加到dependencies部分，具体干啥的，目前不清楚。

3. 生成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: [],
   }