05-tailwindcss

基础用法

自定义class

TailwindCSS提供了@apply语法，这种语法的使用手感与在html模板中使用是一样的：

<template>
  <div
    v-for="menu in ['首页', '学习TailwindCSS', 'TailwindCSS的设计哲学', '最佳实践']"
    :key="menu"
    class="p-2 text-gray-900 font-semibold">{{{ menu }}}</div>
</template>

优化

<div
    v-for="menu in ['首页', '学习TailwindCSS', 'TailwindCSS的设计哲学', '最佳实践']"
    :key="menu"
    class="my-menu">{{{ menu }}}</div>

.my-menu {
    @apply p-2 text-gray-900 font-semibold;
}

自定义变量

<div class="w-[139px] h-[77px] bg-[#165DFF]"></div>

响应式代码

<div class="w-32 h-32 bg-green-500 md:bg-blue-500" />

以上代码表示的含义是：默认显示绿色，在最小为md(768px)的屏幕下显示蓝色。

高级用法 你甚至可以结合任意值语法，实现各种变态的响应式需求，如：

下面的这个盒子，让它在1300px以下（包含1300px）屏幕下显示绿色，以上显示蓝色。

<div class="w-32 h-32 max-[1300px]:bg-green-500 bg-blue-500"></div>

vue整合tailwindcss

教程：https://v2.tailwindcss.com/docs/guides/vue-3-vite

下载依赖

{
  "devDependencies": {
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.42",
    "tailwindcss": "^3.4.10"
  }
}

生成配置文件

执行下面的命令会生成两个文件 tailwind.config.js 和 postcss.config.js

npx tailwindcss init -p

修改tailwind.config.js文件内容

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  prefix: 'tw-',
}

引入css基类

在index.css里面引入

@tailwind base;
@tailwind components;
@tailwind utilities;

测试生效

<template>
  <div class="tw-text-center tw-bg-amber-200 tw-h-[200px] tw-w-[200px]">测试</div>
</template>