南宁企业网站制作wordpress 阅读次数
什么是Tailwind Css?
一个实用优先的 CSS 框架，可以直接在标记中组合以构建任何设计。
开始使用Tailwind Css
如何安装
下面是使用vite构建工具的方法
①安装 Tailwind CSS:
tailwindcss通过@tailwindcss/vitenpm安装。
npm install tailwindcss @tailwindcss/vite
②配置 Vite 插件：
将插件添加@tailwindcss/vite到您的 Vite 配置中。
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite' //这一部分
export default defineConfig({plugins: [tailwindcss(), // 这一部分],
})
③ 导入 Tailwind CSS：
自定义一个css文件，并向您的 CSS 文件添加一个@import导入 Tailwind CSS 的内容。
@import "tailwindcss";
④在main.js上引入这个css文件：
import '@/index.css'
import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')
VS Code 的 IntelliSense
Visual Studio Code 的官方Tailwind CSS IntelliSense扩展通过为用户提供自动完成、语法突出显示和 linting 等高级功能增强了 Tailwind 开发体验。
- 自动完成——为实用程序类以及CSS 函数和指令提供智能建议。
- Linting — 突出显示 CSS 和标记中的错误和潜在缺陷。
- 悬停预览— 将鼠标悬停在实用程序类上时显示其完整的 CSS。
- 语法高亮——以便正确高亮使用自定义 CSS 语法的 Tailwind 功能。
注意
在 Tailwind CSS v4 中，tailwindcss.config.js 配置文件已被移除，希望人们可以使用我们直接生成的 CSS 变量，这要简单得多，并且会显着减少您的捆绑包大小。
Preflight
Preflight 是 Tailwind CSS 的核心基础样式层，基于 modern-normalize 构建，旨在消除浏览器默认样式的不一致，并提供一个统一的样式起点。它自动注入到 base 图层中，确保项目在设计系统约束内一致运行。
关键样式重置
1. 边距移除
Preflight 删除所有元素的默认边距，避免意外依赖浏览器默认值：
*,
::after,
::before,
::backdrop,
::file-selector-button {margin: 0;padding: 0;
}
2. 边框样式重置
统一所有元素的边框样式，确保 border 类可直接使用：
*,
::after,
::before,
::backdrop,
::file-selector-button {box-sizing: border-box;border: 0 solid;
}
3. 标题无样式
标题元素默认不设置字体大小和粗细，需手动定义：
h1,
h2,
h3,
h4,
h5,
h6 {font-size: inherit;font-weight: inherit;
}
4. 列表无样式
默认移除列表项目符号和编号：
ol,
ul,
menu {list-style: none;
}
5. 图像与替换元素
-
图像默认为
block布局，防止对齐问题：img, svg, video, canvas, audio, iframe, embed, object {display: block;vertical-align: middle; } -
图像和视频限制在容器宽度内，保持响应式：
img, video {max-width: 100%;height: auto; }
添加自定义样式
Tailwind 从一开始就被设计为可扩展和可定制的，因此无论您构建什么，您都不会感觉自己正在与框架作斗争。
注意，下述内容都应在你自定义的css文件内操作，因为最新版本去除了配置文件
自定义主题
如果您想要更改调色板、间距比例、排版比例或断点等内容，请使用@themeCSS 中的指令添加自定义内容：
@theme {--font-display: "Satoshi", "sans-serif";--breakpoint-3xl: 120rem;--color-avocado-100: oklch(0.99 0 0);--color-avocado-200: oklch(0.98 0.04 113.22);--color-avocado-300: oklch(0.94 0.11 115.03);--color-avocado-400: oklch(0.92 0.19 114.08);--color-avocado-500: oklch(0.84 0.18 117.33);--color-avocado-600: oklch(0.53 0.12 118.34);--ease-fluid: cubic-bezier(0.3, 0, 0, 1);--ease-snappy: cubic-bezier(0.2, 0, 0, 1);/* ... */
}
为什么@theme不是:root？
主题变量不仅仅是CSS变量 - 它们还指示 Tailwind 创建可在 HTML 中使用的新实用程序类。
由于主题变量的作用比常规 CSS 变量更多，Tailwind 使用特殊语法，以便始终明确定义主题变量。主题变量也必须在顶层定义，并且不能嵌套在其他选择器或媒体查询中，使用特殊语法可以强制执行此要求。
使用任意值
当你发现自己确实需要top: 117px在正确的位置获取背景图像时，请使用 Tailwind 的方括号表示法动态生成具有任意值的类：
<div class="top-[117px]"><!-- ... -->
</div>
这适用于框架中的所有内容，包括背景颜色、字体大小、伪元素内容等：
<div class="bg-[#bada55] text-[22px] before:content-['Festivus']"><!-- ... -->
</div>
函数和指令
指令是您可以在 CSS 中使用的自定义 Tailwind 特定规则，它为 Tailwind CSS 项目提供特殊功能。
@import
使用@import指令内联导入 CSS 文件，包括 Tailwind 本身：
@import "tailwindcss";
@theme
使用@theme指令定义项目的自定义设计标记，如字体、颜色和断点：
@theme {--font-display: "Satoshi", "sans-serif";--breakpoint-3xl: 120rem;--color-avocado-100: oklch(0.99 0 0);--color-avocado-200: oklch(0.98 0.04 113.22);--color-avocado-300: oklch(0.94 0.11 115.03);--color-avocado-400: oklch(0.92 0.19 114.08);--color-avocado-500: oklch(0.84 0.18 117.33);--color-avocado-600: oklch(0.53 0.12 118.34);--ease-fluid: cubic-bezier(0.3, 0, 0, 1);--ease-snappy: cubic-bezier(0.2, 0, 0, 1);/* ... */
}
@variant
使用@variant指令将 Tailwind 变体应用于 CSS 中的样式：
.my-element {background: white;@variant dark {background: black;}
}
@apply
使用@apply指令将任何现有的实用程序类内联到您自己的自定义 CSS 中：
.select2-dropdown {@apply rounded-b-lg shadow-md;
}.select2-search {@apply rounded border border-gray-300;
}.select2-results__group {@apply text-lg font-bold text-gray-900;
}
当您需要编写自定义 CSS（例如覆盖第三方库中的样式）但仍想使用设计令牌并使用您在 HTML 中习惯使用的相同语法时，这很有用。
@reference
如果您想在 Vue 或 Svelte 组件的块中或 CSS 模块中使用@apply或，则需要导入主题变量、自定义实用程序和自定义变体，以使这些值在该上下文中可用。@variant``<style>
为了在输出中不重复任何 CSS，请使用@reference指令导入主样式表以供参考，而无需实际包含样式：
<template><h1>Hello world!</h1>
</template><style>@reference "../../app.css";h1 {@apply text-2xl font-bold text-red-500;}
</style>
如果您只是使用默认主题而没有进行任何自定义，则可以tailwindcss直接导入：
<template><h1>Hello world!</h1>
</template><style>@reference "tailwindcss";h1 {@apply text-2xl font-bold text-red-500;}
</style>
--alpha()
使用该--alpha()函数调整颜色的不透明度：
输入 CSS
.my-element {color: --alpha(var(--color-lime-300) / 50%);
}
编译后的 CSS
.my-element {color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);
}
–spacing()
使用该--spacing()函数根据您的主题生成间距值：
输入 CSS
.my-element {margin: --spacing(4);
}
编译后的 CSS
.my-element {margin: calc(var(--spacing) * 4);
}