第一章：认识Tailwind CSS - 第三节 - Tailwind CSS 开发环境搭建和工具链配置

# 创建项目目录
mkdir my-tailwind-project
cd my-tailwind-project

# 初始化 package.json
npm init -y

# 安装必要依赖
npm install -D tailwindcss postcss autoprefixer

# 生成配置文件
npx tailwindcss init -p

# 安装依赖
npm install -D tailwindcss postcss autoprefixer

# 生成配置文件
npx tailwindcss init -p

module.exports = {
  // JIT 模式配置
  mode: 'jit',
  
  // 内容路径配置
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx,vue}",
    "./public/**/*.html",
  ],
  
  // 主题配置
  theme: {
    // 扩展现有主题
    extend: {
      colors: {
        'custom-blue': '#1947E5',
      },
      spacing: {
        '128': '32rem',
      }
    },
    // 自定义断点
    screens: {
      'tablet': '640px',
      'laptop': '1024px',
      'desktop': '1280px',
    },
  },
  
  // 插件配置
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  }
}

# 创建项目
npx create-react-app my-app
cd my-app

# 安装 Tailwind
npm install -D tailwindcss postcss autoprefixer

# 创建配置文件
npx tailwindcss init -p

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

# 创建项目
npm init vue@latest
cd my-vue-app

# 安装 Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

# 创建项目
npx create-next-app@latest my-next-app
cd my-next-app

# 安装 Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

{
  "editor.quickSuggestions": {
    "strings": true
  },
  "css.validate": false,
  "tailwindCSS.includeLanguages": {
    "plaintext": "html",
    "javascript": "javascript",
    "css": "css"
  },
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
}

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production'
      ? {
          '@fullhuman/postcss-purgecss': {
            content: [
              './src/**/*.{js,jsx,ts,tsx,vue}',
              './public/**/*.html',
            ],
            defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
          }
        }
      : {})
  }
}

// vite.config.js
export default {
  server: {
    watch: {
      usePolling: true,
    },
    hmr: {
      overlay: true
    }
  }
}