Vue开发指南

Appearance

TailwindCSS ​

Tailwindcss 是一个基于原子类的高度可定制的 CSS 框架，通过组合原子类来构建样式，提供了灵活、高效和可定制的方式来开发现代化的 Web 界面。

WARNING

不适用于 uni-app 项目，例如：编译后的CSS样式 * 微信小程序不支持此种语法。

安装(Vite 版) ​

  • Vite 默认内置了 PostCSS 工具
bash
npm install -D tailwindcss
  • 生成 tailwind.config.js 文件
bash
npx tailwindcss init

TIP

  • 生成 tailwind.config.ts 文件
bash
npx tailwindcss init --ts
  • 生成 tailwind.config.js 完整文件
bash
npx tailwindcss init --full
  • 生成 postcss.config.js 文件
bash
npx tailwindcss init -p

注意

TailwindCSS 必须依赖 postcss.config.js 文件，两种方式生效：

  • 创建 postcss.config.js 文件
  • vite.config.js 文件添加 postcss (点击查看 Vite)

配置模板路径 ​

在 tailwind.config.js 文件中添加所有模板的路径。

js
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
}

添加 Tailwind 指令 ​

在 ./src/style.css 文件中添加 @tailwind 指令。

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

格式化插件 ​

点击查看 Prettier

预处理器 ​

PostCSS ​

Vite 默认内置了 PostCSS 工具。

  1. 安装 postcss-import

Vite 默认内置了 postcss-import 插件。

bash
npm install -D postcss-import
  1. 配置
js
// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {}
  }
}
  1. 引入
css
/* main.css */
@import 'tailwindcss/base';
@import './custom-base-styles.css';

@import 'tailwindcss/components';
@import './custom-components.css';

@import 'tailwindcss/utilities';
@import './custom-utilities.css';

注意

当安装 postcss-import 插件时，引入 Tailwind 不能再使用 @tailwind base @tailwind components @tailwind utilities。

Sass ​

scss
h1 {
  background-color: theme('colors.red.500');
  @apply text-3xl font-bold underline;
}

注意

  • Sass 在 Tailwind 之前单独运行，不能将 Tailwind 函数放在 Sass 函数中。如：background-color: darken(theme('colors.red.500'), 10%)
  • !important 不能直接用到 @apply 上，需要使用 Sass 插件语法。如：@apply text-3xl font-bold underline #{!important}

状态类 ​

伪类 ​

  • 链接伪类
修饰符CSS说明
visited&:vistied已被访问过的链接
  • 用户动作伪类
修饰符CSS说明
hover&:hover鼠标悬停在元素上时
active&:active元素被点击时
focus&:focus元素获得焦点时
  • 结构伪类
修饰符CSS说明
first&:first-child选择父元素中的第一个子元素
last&:last-child选择父元素中的最后一个子元素
odd&:nth-child(odd)选择父元素中的奇数子元素
even&:nth-child(even)选择父元素中的偶数子元素
  • 状态伪类
修饰符CSS说明
enabled&:enabled可用状态的表单元素
disabled&:disabled不可用状态的表单元素
checked&:checked被选中的复选框或单选按钮
  • 内容伪类
修饰符CSS说明
empty&:empty没有子元素或文本内容的元素
  • 目标伪类
修饰符CSS说明
target&:target当前页面 URL 中的锚点目标
  • UI 元素状态伪类
修饰符CSS说明
required&:required表单元素的值是必填
valid&:valid表单元素的值是有效
invalid&:invalid表单元素的值无效
  • 列表伪类
修饰符CSS说明
first-of-type&:first-of-type选择父元素中的第一个相同类型的子元素
ast-of-type&:ast-of-type选择父元素中的最后一个相同类型的子元素
  • 父子伪类

当需要根据某些父元素的状态设置子元素样式时，请使用 group 类标记父元素，并使用类似 group-hover一样使用group-* 来设置目标子元素的样式。

html
<a
  href="#"
  class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500"
>
  <div class="flex items-center space-x-3">
    <svg
      class="h-6 w-6 stroke-sky-500 group-hover:stroke-white"
      fill="none"
      viewBox="0 0 24 24"
    ></svg>
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">
      New project
    </h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">
    Create a new project from a variety of starting templates.
  </p>
</a>
嵌套父子伪类

嵌套父子伪类时，可以根据特定父元素的状态设置子元素样式时，请使用 group/{name} 类标记特定父元素，并使用类似 group-hover/{name} 一样使用 group-{修改符}/{name} 来设置目标子元素的样式。

html
<ul role="list">
  <li
    class="group/item hover:bg-slate-100"
    v-for="person in people"
    :key="person.id"
  >
    <img src="{person.imageUrl}" alt="" />
    <div>
      <a href="{person.url}">{person.name}</a>
      <p>{person.title}</p>
    </div>
    <a
      class="group/edit invisible hover:bg-slate-200 group-hover/item:visible"
      href="tel:{person.phone}"
    >
      <span class="group-hover/edit:text-gray-700 ">Call</span>
      <svg
        class="group-hover/edit:translate-x-0.5 group-hover/edit:text-slate-500"
      ></svg>
    </a>
  </li>
</ul>
  • 兄弟伪类

当需要根据兄弟元素的状态设置兄弟元素样式时，请使用 peer 类标记兄弟元素，并使用类似 peer-invalid 一样使用 peer-* 来设置目标兄弟元素的样式。

html
<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Email</span>
    <input type="email" class="peer" />
    <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
      Please provide a valid email address.
    </p>
  </label>
</form>

注意 peer 与 peer-* 前后关系：

由于 CSS 中兄弟元素的执行方式，peer 类只能标记在第一个兄弟元素，peer-* 类标记在第二个兄弟元素。

多个兄弟伪类

当使用多个兄弟伪类时，可以通过使用 peer/{name} 类标记该兄弟元素，并使用类似 peer-checked/{name} 类一样使用 peer-{修改符}/{name} 来设置目标兄弟元素的样式。

html
<fieldset>
  <legend>Published status</legend>

  <input id="draft" class="peer/draft" type="radio" name="status" checked />
  <label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>

  <input id="published" class="peer/published" type="radio" name="status" />
  <label for="published" class="peer-checked/published:text-sky-500"
    >Published</label
  >

  <div class="hidden peer-checked/draft:block">
    Drafts are only visible to administrators.
  </div>
  <div class="hidden peer-checked/published:block">
    Your post will be publicly visible on your site.
  </div>
</fieldset>

伪元素 ​

修饰符CSS说明
before&::before在元素内容前插入生成的内容
after&::after在元素内容后插入生成的内容
first-line&::first-line选择元素的第一行文本
first-letter&::first-letter选择元素的第一个字母
placeholder&::placeholder选择表单元素的占位符文本
file&::file-selector-button选择文件上传按钮样式
selection&::selection选择用户选择的文本部分
backdrop&::backdrop选择元素的背景，用于模态框效果
marker&::marker列表项前面的标记样式

注意

  1. before 和 after 修饰符，Tailwind 默认情况下会自动添加 content-[''] ，若需要不同的值，则需要手动修改，如 content-['*'] 。
  2. 如果禁用 Tailwind Preflight 预检功能，则默认情况下 Tailwind 不会将 content 属性设置为空；且之后任何时候使用 before 和 after 修饰符时都需要手动添加 content-[''] 。

媒体查询 ​

修饰符CSS说明
sm@media (min-width: 640px)屏幕最小宽度：640px
md@media (min-width: 768px)屏幕最小宽度：768px
lg@media (min-width: 1024px)屏幕最小宽度：1024px
xl@media (min-width: 1280px)屏幕最小宽度：1280px
2xl@media (min-width: 1536px)屏幕最小宽度：1536px
min-[…]@media (min-width: …)屏幕最小宽度：自定义
max-[…]@media (max-width: …)屏幕最大宽度：自定义
max-sm@media not all and (min-width: 640px)屏幕最大宽度：640px
max-md@media not all and (min-width: 768px)屏幕最大宽度：768px
max-lg@media not all and (min-width: 1024px)屏幕最大宽度：1024px
max-xl@media not all and (min-width: 1280px)屏幕最大宽度：1280px
max-2xl@media not all and (min-width: 1536px)屏幕最大宽度：1536px
dark@media (prefers-color-scheme: dark)深色模式
portrait@media (orientation: portrait)屏幕方向为纵向（竖屏）模式
landscape@media (orientation: landscape)屏幕方向为横向（横屏）模式

属性选择器 ​

修饰符CSS说明
aria-[…]&[aria-…]增强网页可访问性
data-[…]&[data-…]在 HTML 元素上存储自定义数据
rtl[dir=“rtl”]&设置 HTML 元素从右到左样式
ltr[dir=“ltr”]&设置 HTML 元素从左到右样式
open&[open]指定<details> 或 <dialog> 元素处于打开状态样式

响应式设计 ​

默认情况下，Tailwind 使用移动端优先断点系统（即：移动端设计 CSS 样式时，无须添加 sm 及其他修饰符）。

注意

无断点修饰符将在所有屏幕尺寸上生效，有断点修饰符仅在指定断点及以上生效(即：有断点修饰符 CSS 样式会覆盖无断点修饰符 CSS 样式)。

默认断点 ​

  • sm
  • md
  • lg
  • xl
  • 2xl

断点范围 ​

  • max-sm
  • max-md
  • max-lg
  • max-xl
  • max-2xl

多个断点 ​

在特定断点后追加 max-* 修饰符

html
<!-- 断点范围：md ~ xl -->
<div class="md:max-xl:flex">
  <!-- ... -->
</div>

单个断点 ​

在特定断点后追加该断点的下一个断点 max-* 修饰符

html
<!-- 断点范围：md ~ lg -->
<div class="md:max-lg:flex">
  <!-- ... -->
</div>

自定义断点 ​

  • 方法一：tailwind.config.js
js
module.exports = {
  theme: {
    screens: {
      tablet: '640px',
      // => @media (min-width: 640px) { ... }

      laptop: '1024px',
      // => @media (min-width: 1024px) { ... }

      desktop: '1280px'
      // => @media (min-width: 1280px) { ... }
    }
  }
}
  • 方法：min-[...] & max-[...]
html
<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
  <!-- ... -->
</div>

深色模式 ​

自动启用 ​

默认情况下，Tailwind 自动跟随设备系统偏好设置。

手动启用 ​

  • 第一步：tailwind.config.js
js
module.exports = {
  darkMode: 'class'
  // ...
}

TIP

若遇到框架（如 NativeScript）拥有自己的方法来启用暗模式，并在暗模式处于活动状态时添加不同的类名，则可以通过设置为 darkMode 将自定义选择器作为第二项的数组来自定义暗模式选择器名称:

js
module.exports = {
  darkMode: ['class', '[data-mode="dark"]']
  // ...
}
  • 第二步：在 HTML 根节点上添加 dark 类
html
<html class="dark">
  <body>
    <!-- Will be black -->
    <div class="bg-white dark:bg-black">
      <!-- ... -->
    </div>
  </body>
</html>

TIP

如何将 dark 类添加到 html 元素取决于您，但常见的方法是使用一些 JS 从某处（例如 localStorage）读取首选项并相应地更新 DOM。

js
// 从 localStorage 中获取用户的暗色模式偏好（true 或 false）
const prefersDarkMode = JSON.parse(localStorage.getItem('darkModePreference'))

// 根据用户偏好动态地添加或移除 .dark 类
if (prefersDarkMode) {
  document.documentElement.classList.add('dark')
} else {
  document.documentElement.classList.remove('dark')
}

自定义样式 ​

自定义主题 ​

如果要更改调色板、间距比例、排版比例或断点等内容，请将自定义 theme 项添加到 tailwind.config.js 文件部分：

js
module.exports = {
  theme: {
    screens: {
      // ...
    },
    colors: {
      // ...
    },
    fontFamily: {
      // ...
    },
    extend: {
      spacing: {
        // ...
      },
      borderRadius: {
        // ...
      }
    }
  }
}

任意值 ​

  • CSS 属性
html
<div class="[mask-type:luminance] [--scroll-offset:56px]">
  <!-- ... -->
</div>

TIP

以上 CSS 属性中 --scroll-offset 为 CSS 变量。

  • CSS 属性值
html
<div class="bg-[#bada55] text-[22px]  before:content-['Festivus']">
  <!-- ... -->
</div>
  • theme 函数
html
<div class="grid grid-cols-[fit-content(theme(spacing.32))]">
  <!-- ... -->
</div>
  • CSS 变量
html
<div class="bg-[--my-color]">
  <!-- ... -->
</div>
  • 变体
html
<ul role="list">
  <li class="[&:nth-child(3)]:underline" v-for="item in list" :key="item.id">
    {item.name}
  </li>
</ul>
  • 空格

当任意值需要包含空格时，请改用下划线 _ ，Tailwind 会在构建时自动将其转换为空格；若实际上需要使用下划线，则使用反斜杠 \ 转义下划线，Tailwind 不会将其转换为空格。

html
<div class="grid grid-cols-[1fr_500px_2fr] before:content-['hello\_world']">
  <!-- ... -->
</div>

CSS 数据类型 ​

当使用 CSS 变量作为任意值时，将会产生语义化歧视，给开发者造成困扰，可以通过在值前面添加 CSS 数据类型“提示”。

html
<div class="text-[length:var(--my-var)] text-[color:var(--my-var)]">
  <!-- ... -->
</div>

常见 CSS 数据类型

  • color
  • image
  • length
  • number

原生 CSS ​

  • 基础样式：包括一些重置和基础的 HTML 元素样式
css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }

  h2 {
    background-color: theme('colors.red.500');
  }
}
  • 组件样式：包括一些可复用的组件样式
css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .card {
    background-color: theme('colors.white');
    border-radius: theme('borderRadius.lg');
    padding: theme('spacing.6');
    box-shadow: theme('boxShadow.xl');
  }

  .btn {
    @apply rounded bg-blue-500 text-xl border-0 shadow-md;
  }
}
  • 实用工具：Tailwind CSS 的核心概念，提供大量的类名，用于快速构建样式
css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}

指令 & 函数 ​

指令 ​

  • @tailwiind：将 Tailwind 的 base 、 components utilities 和 variants 样式插入到 CSS 中
  • @layer：将自定义样式归属到 Tailwind 的 base 、 components 和 utilities 中的哪一个图层中
  • @apply：将 Tailwind 的内置样式应用到自定义 CSS 中
  • @config：指定 Tailwind 在编译该 CSS 文件时应使用哪个配置文件

注意

使用 @apply 指令应用到自定义 CSS 中时，默认情况下会自动删除 Tailwind 的 !important 样式以避免特殊性问题；若需要使用 !important ，可在末尾声明；若使用 Sass 预处理器，需要使用插值语法 #{!important} 。

函数 ​

  • theme()：访问 Tailwind 配置值
css
.content-area {
  /* 整数 */
  height: calc(100vh - theme(spacing.12));
  /* 小数 */
  height: calc(100vh - theme(spacing[2.5]));
  /* 无不透明度 */
  background-color: theme(colors.blue.500);
  /* 有不透明度 */
  background-color: theme(colors.blue.500 / 75%);
}
  • screen()：按名称引用断点的媒体查询
css
@media screen(sm) {
  /* ... */
}

定制化 ​

Prefix ​

prefix 选项允许向 Tailwind 生成的所有类添加自定义前缀，但不会将前缀添加到自定义类中。

js
module.exports = {
  prefix: 'tw-'
}

Important ​

important 选项允许控制 Tailwind 生成的所有类是否应标记为 !important 。

js
module.exports = {
  important: true
}

注意

当设置 important: true 时会覆盖第三方 JS 库的内联样式，解决方法如下 ：

  • id 选择器：必须在根元素上
js
module.exports = {
  // ...
  important: '#app'
}
  • ! (感叹号)：始终在类名开头，在修饰符之后(但在前缀之前)
html
<div class="font-bold !font-medium sm:hover:!tw-font-bold"></div>

Separator ​

separator 选项允许自定义应该使用哪个字符来分隔修饰符(如：屏幕大小、 hover 、 focus 等)和类名(如：text-center 、 items-end 等)。TailwindCSS 默认使用冒号 : 分隔。

js
module.exports = {
  separator: ':'
}

Core Plugins ​

corePlugins 选项允许完全禁用 Tailwind 默认生成的类。具体插件请查阅官网。

  • 禁用全部
js
module.exports = {
  corePlugins: []
}
  • 禁用部分
js
module.exports = {
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false
  }
}
  • 允许部分
js
module.exports = {
  corePlugins: ['margin', 'padding', 'backgroundColor']
}

Content ​

Content 选项允许配置 HTML 元素，JavaScript 组件和包含 Tailwind 类名的其他源文件路径。

  • * ：匹配除斜杠和隐藏文件之外的任何内容
  • ** ：匹配零个或多个目录
  • {}：在 {} 之间使用逗号分隔值来匹配选项列表
js
module.exports = {
  content: [
    './src/pages/**/*.{vue,js,ts,jsx,tsx,html}',
    './src/components/**/*.{vue,js,ts,jsx,tsx,html}',
    './public/index.html',
    './src/index.html'
  ]
}

注意

./ 路径是相对于项目的根目录，而不是 tailwind.config.js 文件的路径(即：tailwind.config.js 文件在自定义的位置， ./ 路径仍相对于项目的根目录)。

Theme ​

Theme 选项允许自定义项目的调色板、文字比例、字体、断点、边框半径值等。

Screens ​

screens 键允许自定义项目中的响应断点。

js
module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px'
    }
  }
}

Colors ​

colors 键允许自定义项目的全局调色板。

js
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      black: '#000',
      white: '#fff',
      gray: {
        DEFAULT: '#06b6d4', //  如：bg-gray,bg-gray-100
        100: '#f7fafc',
        // ...
        900: '#1a202c'
      }

      // ...
    }
  }
}
选用默认颜色 ​

若不想使用默认全部颜色，仅使用默认部分颜色，则通过导入 tailwindcss/colors 配置文件并选择要使用的颜色。

js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      yellow: colors.yellow
    }
  }
}
主题色命名 ​

默认情况下，Tailwind 使用文字颜色名称（如红色、绿色等）和数字刻度（其中 50 表示浅色，900 表示深色），也可以使用抽象名称（如 primary 、 secondary）。

js
module.exports = {
  theme: {
    colors: {
      primary: '#5c6ac4',
      secondary: '#ecc94b'
    }
  }
}
CSS 变量 ​

如果要将颜色定义为 CSS 变量，且使用不透明度修饰符语法，则需要将这些变量定义为颜色通道。

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

@layer base {
  :root {
    /* rgb */
    --color-primary: 255 115 179;
    /* hsl */
    --color-secondary: 198deg 93% 60%;
  }
}
js
module.exports = {
  theme: {
    colors: {
      // Using modern `rgb`
      primary: 'rgb(var(--color-primary) / <alpha-value>)',
      secondary: 'rgb(var(--color-secondary) / <alpha-value>)',

      // Using modern `hsl`
      primary: 'hsl(var(--color-primary) / <alpha-value>)',
      secondary: 'hsl(var(--color-secondary) / <alpha-value>)',

      // Using legacy `rgba`
      primary: 'rgba(var(--color-primary), <alpha-value>)',
      secondary: 'rgba(var(--color-secondary), <alpha-value>)'
    }
  }
}

Spacing ​

spacing 键允许自定义项目的全局间距和大小调整比例。点击查看 Tailwind 默认间距刻度。

js
module.exports = {
  theme: {
    spacing: {
      px: '1px',
      0: '0',
      0.5: '0.125rem',
      1: '0.25rem',
      1.5: '0.375rem',
      2: '0.5rem',
      2.5: '0.625rem',
      3: '0.75rem',
      3.5: '0.875rem',
      4: '1rem',
      5: '1.25rem',
      6: '1.5rem',
      7: '1.75rem',
      8: '2rem',
      9: '2.25rem',
      10: '2.5rem'
      // ...
    }
  }
}

扩展默认主题 ​

如果要保留主题选项的默认值，但也要添加新值，请在配置文件 theme.extend 键下添加扩展。

js
module.exports = {
  theme: {
    extend: {
      // Adds a new breakpoint in addition to the default breakpoints
      screens: {
        '3xl': '1600px'
      }
    }
  }
}

TIP

theme.extend 键下所有可用扩展点击查询 。

覆盖默认主题 ​

如果要覆盖默认主题中的某一选项，可在 tailwind.config.js 以下 theme 部分下添加覆盖其选项。

js
module.exports = {
  theme: {
    // Replaces all of the default `opacity` values
    opacity: {
      0: '0',
      20: '0.2',
      40: '0.4',
      60: '0.6',
      80: '0.8',
      100: '1'
    }
  }
}

Plugins ​

使用 Tailwind 可重用的第三方插件扩展。

js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(({ argu1[, argu2[, ...argus]] }) => {
      // Add your custom styles here
    }),
  ]
}

TIP

插件函数象参数 argument 取值如下：

  • addUtilities()：用于注册新的静态 utility 样式
  • matchUtilities()：用于注册新的动态 utility 样式
  • addComponents()：用于注册新的静态 component 样式
  • matchComponents()：用于注册新的动态 component 样式
  • addBase()：用于注册新的 base 样式
  • addVariant()：用于注册自定义静态变体
  • matchVariant()：用于注册自定义动态变体
  • theme()：用于在用户的 theme 配置中查找值
  • config()：用于在用户的 Tailwind 配置中查找值
  • corePlugins()：用于检查是否启用了核心插件
  • e()：用于手动转义要在类名中使用的字符串

官方插件 ​

  • Typography

@tailwindcss/typography 插件添加了一组 prose 类，可用于快速将合理的排版样式添加到来自 markdown 或 CMS 数据库等来源的内容块中。

  • Forms

@tailwindcss/forms 插件添加了一个固定的表单重置层，可以更轻松地使用 utility 类设置表单元素的样式。

  • Aspect ratio

@tailwindcss/aspect-ratio 插件是本机 aspect-ratio 支持的替代方法，适用于较旧的浏览器，并添加了可以组合的 aspect-w-{n} 和 aspect-h-{n} 类，以便为元素提供固定的纵横比。

  • Container queries

@tailwindcss/container-queries 插件添加了新的 @{size} 变体(例如 @sm 和 @md )，允许根据标有 @container 的父级尺寸而不是视口来设置元素的样式。

Presets ​

presets 选项允许指定要用作基础的其他配置，从而轻松打包一组要跨项目复用的自定义项。

js
module.exports = {
  presets: [require('./my-preset.js')]
}

创建预设 ​

预设只是常规的 Tailwind 配置对象，其内容与在 tailwind.config.js 文件中添加的配置完全相同，只是文件名不同而已。

js
// my-preset.js
module.exports = {
  theme: {
    colors: {},
    fontFamily: {},
    extend: {}
  },
  plugins: []
}

深度融合逻辑

特定于项目的配置（可在 tailwind.config.js 文件中找到的配置）根据创建预设进行合并，其方式与与默认配置合并的方式相同。

禁用默认预设 ​

禁用 Tailwind 的所有默认预设，则不会生成颜色、字体系列、字体大小、间距值等。

js
// my-preset.js
module.exports = {
  presets: []
}

预检 ​

预检(Preflight) 建立在现代规范化之上，是一组用于 Tailwind 项目的基本样式，旨在消除跨浏览器的不一致，并使您更轻松地在设计系统的约束下工作。

css
@tailwind base; /* Preflight will be injected here */

默认预检 ​

  • 默认边距已删除
css
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
  • h1 ~ h6 样式已清除
css
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
  • ol / ul 样式已清除
css
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

注意事项

使用 ol / ul 但未设置其样式，则默认不会被定义为列表；若内容确定是一个列表形式，且希望保持其无样式，则需要向 ol / ul 添加 role="list" 属性。

html
<ul role="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
  • 图像默认为块元素
css
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}
  • 图像受限于父级宽度
css
img,
video {
  max-width: 100%;
  height: auto;
}
  • 边框样式全局重置
css
*,
::before,
::after {
  border-width: 0;
  border-style: solid;
  border-color: theme('borderColor.DEFAULT', currentColor);
}

扩展预检 ​

如果想在预检上面添加自己的基本样式，只需使用 @layer base 指令将它们添加到 CSS 中。

css
@tailwind base;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  h3 {
    @apply text-lg;
  }
  a {
    @apply text-blue-600 underline;
  }
}

@tailwind components;
@tailwind utilities;

禁用预检 ​

js
module.exports = {
  corePlugins: {
    preflight: false
  }
}

读书、摄影、画画、弹琴、编程

Copyright © 2023 退居二线的程序猿