太仓住房城乡建设网站,网站集约化建设探讨,wordpress画廊插件,小白怎么学做网站什么是Tailwind Css?
一个实用优先的 CSS 框架#xff0c;可以直接在标记中组合以构建任何设计。
开始使用Tailwind Css
如何安装
下面是使用vite构建工具的方法
①安装 Tailwind CSS:
tailwindcss通过tailwindcss/vitenpm安装。
npm install tailwindcss tailwindcss…什么是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.vuecreateApp(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 classtop-[117px]!-- ... --
/div这适用于框架中的所有内容包括背景颜色、字体大小、伪元素内容等
div classbg-[#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或则需要导入主题变量、自定义实用程序和自定义变体以使这些值在该上下文中可用。variantstyle
为了在输出中不重复任何 CSS请使用reference指令导入主样式表以供参考而无需实际包含样式
templateh1Hello world!/h1
/templatestylereference ../../app.css;h1 {apply text-2xl font-bold text-red-500;}
/style如果您只是使用默认主题而没有进行任何自定义则可以tailwindcss直接导入
templateh1Hello world!/h1
/templatestylereference 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);
}
