Skip to main content

基础使用

基础使用​

官方文档

安装​

npm install -D tailwindcss postcss autoprefixer
# or
yarn add -D tailwindcss postcss autoprefixer
# or
pnpm i -D tailwindcss postcss autoprefixer

# 初始化
npx tailwindcss init -p

vite + vue3​

  • 配置路径 
// tailwind.config.js
module.exports = {
  // 指定入口文件·
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
}
  • 创建一个 ./src/index.css
// ./src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
  • 引入到 vue
import { createApp } from 'vue'
import App from './App.vue'

// 引入刚才创建的 index.css
import './index.css'

createApp(App).mount('#app')

只要确保在 node_modules 通目录下存在 tailwind.config.js和 postcss.config.js ，vite即可自动加载tailwindcss，前提是运行了 npx tailwindcss init -p

CND​

<head>
    <script src="https://cdn.tailwindcss.com"></script>
      <script>
        // config
        tailwind.config = {
          theme: {
            extend: {
              colors: {
                clifford: '#da373d',
              }
            }
          }
        }
      </script>
  </head>

配合 prettier 排序样式​

链接

样式组合(@apply)​

压缩css​

  • 命令行压缩
npx tailwindcss -o build.css --minify
  • 配置文件压缩
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    // 添加 cssnano 到配置中
    ...( process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}) 
  }
}

动态尺寸断点​

max-[600px]:bg-sky-300

max-[1920px]:bg-sky-500