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";
https://i-blog.csdnimg.cn/direct/1b76e31fb7594e10b58462c3950c38e2.png#pic_center
④在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 开发体验。
https://i-blog.csdnimg.cn/direct/b2712d10eb3f4316b7b77fefbe2bf8fa.png#pic_center
[*]自动完成——为实用程序类以及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-">
<!-- ... -->
</div>
这实用于框架中的所有内容，包罗背景颜色、字体巨细、伪元素内容等：
<div class="bg-[#bada55] text- 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);
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]