TailwindCss快速上手

什么是Tailwind Css?

[color=‘skyblue’]一个实用优先的 CSS 框架，可以直接在标记中组合以构建任何计划。
开始使用Tailwind Css

如何安装

下面是使用vite构建工具的方法
①安装 Tailwind CSS:
tailwindcss通过@tailwindcss/vitenpm安装。

1. npm install tailwindcss @tailwindcss/vite

复制代码

②配置 Vite 插件：
将插件添加@tailwindcss/vite到您的 Vite 配置中。

1. import { defineConfig } from 'vite'
2. import tailwindcss from '@tailwindcss/vite'  //这一部分
3. export default defineConfig({
4.   plugins: [
5.     tailwindcss(),  // 这一部分
6.   ],
7. })

复制代码

③ 导入 Tailwind CSS：
自定义一个css文件，并向您的 CSS 文件添加一个@import导入 Tailwind CSS 的内容。

1. @import "tailwindcss";

复制代码

④在main.js上引入这个css文件：

1. import '@/index.css'
2. import { createApp } from 'vue'
3. import App from './App.vue'
5. createApp(App).mount('#app')

复制代码

VS Code 的 IntelliSense

Visual Studio Code 的官方Tailwind CSS IntelliSense扩展通过为用户提供自动完成、语法突出表现和 linting 等高级功能增强了 Tailwind 开发体验。

• 自动完成——为实用程序类以及CSS 函数和指令提供智能发起。
  
• Linting — 突出表现 CSS 和标记中的错误和潜在缺陷。
  
• 悬停预览— 将鼠标悬停在实用程序类上时表现其完备的 CSS。
  
• 语法高亮——以便精确高亮使用自定义 CSS 语法的 Tailwind 功能。
  

注意

在 Tailwind CSS v4 中，[color=‘skyblue’]tailwindcss.config.js 配置文件已被移除，盼望人们可以使用我们直接天生的 CSS 变量，这要简单得多，并且会显着减少您的捆绑包巨细。
Preflight

Preflight 是 Tailwind CSS 的核心底子样式层，基于 modern-normalize 构建，旨在消除欣赏器默认样式的不一致，并提供一个统一的样式起点。它自动注入到 base 图层中，确保项目在计划系统约束内一致运行。
关键样式重置

1. 边距移除

Preflight 删除所有元素的默认边距，避免意外依赖欣赏器默认值：

1. *,
2. ::after,
3. ::before,
4. ::backdrop,
5. ::file-selector-button {
6.   margin: 0;
7.   padding: 0;
8. }

复制代码

2. 边框样式重置

统一所有元素的边框样式，确保 border 类可直接使用：

1. *,
2. ::after,
3. ::before,
4. ::backdrop,
5. ::file-selector-button {
6.   box-sizing: border-box;
7.   border: 0 solid;
8. }

复制代码

3. 标题无样式

标题元素默认不设置字体巨细和粗细，需手动定义：

1. h1,
2. h2,
3. h3,
4. h4,
5. h5,
6. h6 {
7.   font-size: inherit;
8.   font-weight: inherit;
9. }

复制代码

4. 列表无样式

默认移除列表项目符号和编号：

1. ol,
2. ul,
3. menu {
4.   list-style: none;
5. }

复制代码

5. 图像与更换元素

• 图像默以为 block 结构，防止对齐问题：
  
  1. img,
  2. svg,
  3. video,
  4. canvas,
  5. audio,
  6. iframe,
  7. embed,
  8. object {
  9.   display: block;
  10.   vertical-align: middle;
  11. }

  复制代码
• 图像和视频限定在容器宽度内，保持相应式：
  
  1. img,
  2. video {
  3.   max-width: 100%;
  4.   height: auto;
  5. }

  复制代码

添加自定义样式

[color=‘skyblue’]Tailwind 从一开始就被计划为可扩展和可定制的，因此无论您构建什么，您都不会感觉自己正在与框架作斗争。
注意，下述内容都应在你自定义的css文件内操作，因为最新版本去除了配置文件
自定义主题

如果您想要更改调色板、间距比例、排版比例或断点等内容，请使用@themeCSS 中的指令添加自定义内容：

1. @theme {
2.   --font-display: "Satoshi", "sans-serif";
4.   --breakpoint-3xl: 120rem;
6.   --color-avocado-100: oklch(0.99 0 0);
7.   --color-avocado-200: oklch(0.98 0.04 113.22);
8.   --color-avocado-300: oklch(0.94 0.11 115.03);
9.   --color-avocado-400: oklch(0.92 0.19 114.08);
10.   --color-avocado-500: oklch(0.84 0.18 117.33);
11.   --color-avocado-600: oklch(0.53 0.12 118.34);
13.   --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
14.   --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
16.   /* ... */
17. }

复制代码

为什么@theme不是:root？

主题变量不仅仅是CSS变量 - 它们还指示 Tailwind 创建可在 HTML 中使用的新实用程序类。
由于主题变量的作用比通例 CSS 变量更多，Tailwind 使用特殊语法，以便始终明白定义主题变量。主题变量也必须在顶层定义，并且不能嵌套在其他选择器或媒体查询中，使用特殊语法可以强制执行此要求。
使用任意值

当你发现自己确实必要top: 117px在精确的位置获取背景图像时，请使用 Tailwind 的方括号表示法动态天生具有任意值的类：

1. <div class="top-[117px]">
2.   <!-- ... -->
3. </div>

复制代码

这实用于框架中的所有内容，包罗背景颜色、字体巨细、伪元素内容等：

1. <div class="bg-[#bada55] text-[22px] before:content-['Festivus']">
2.   <!-- ... -->
3. </div>

复制代码

函数和指令

指令是您可以在 CSS 中使用的自定义 Tailwind 特定规则，它为 Tailwind CSS 项目提供特殊功能。
@import

使用@import指令内联导入 CSS 文件，包罗 Tailwind 本身：

1. @import "tailwindcss";

复制代码

@theme

使用@theme指令定义项目标自定义计划标记，如字体、颜色和断点：

1. @theme {
2.   --font-display: "Satoshi", "sans-serif";
4.   --breakpoint-3xl: 120rem;
6.   --color-avocado-100: oklch(0.99 0 0);
7.   --color-avocado-200: oklch(0.98 0.04 113.22);
8.   --color-avocado-300: oklch(0.94 0.11 115.03);
9.   --color-avocado-400: oklch(0.92 0.19 114.08);
10.   --color-avocado-500: oklch(0.84 0.18 117.33);
11.   --color-avocado-600: oklch(0.53 0.12 118.34);
13.   --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
14.   --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
16.   /* ... */
17. }

复制代码

@variant

使用@variant指令将 Tailwind 变体应用于 CSS 中的样式：

1. .my-element {
2.   background: white;
4.   @variant dark {
5.     background: black;
6.   }
7. }

复制代码

@apply

使用@apply指令将任何现有的实用程序类内联到您自己的自定义 CSS 中：

1. .select2-dropdown {
2.   @apply rounded-b-lg shadow-md;
3. }
5. .select2-search {
6.   @apply rounded border border-gray-300;
7. }
9. .select2-results__group {
10.   @apply text-lg font-bold text-gray-900;
11. }

复制代码

当您必要编写自定义 CSS（比方覆盖第三方库中的样式）但仍想使用计划令牌并使用您在 HTML 中风俗使用的相同语法时，这很有用。
@reference

如果您想在 Vue 或 Svelte 组件的块中或 CSS 模块中使用@apply或，则必要导入主题变量、自定义实用程序和自定义变体，以使这些值在该上下文中可用。@variant``<style>
为了在输出中不重复任何 CSS，请使用@reference指令导入主样式表以供参考，而无需实际包罗样式：

1. <template>
2.   <h1>Hello world!</h1>
3. </template>
5. <style>
6.   @reference "../../app.css";
8.   h1 {
9.     @apply text-2xl font-bold text-red-500;
10.   }
11. </style>

复制代码

如果您只是使用默认主题而没有举行任何自定义，则可以tailwindcss直接导入：

1. <template>
2.   <h1>Hello world!</h1>
3. </template>
5. <style>
6.   @reference "tailwindcss";
8.   h1 {
9.     @apply text-2xl font-bold text-red-500;
10.   }
11. </style>

复制代码

--alpha()

使用该--alpha()函数调解颜色的不透明度：
输入 CSS

1. .my-element {
2.   color: --alpha(var(--color-lime-300) / 50%);
3. }

复制代码

编译后的 CSS

1. .my-element {
2.   color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);
3. }

复制代码

–spacing()

使用该--spacing()函数根据您的主题天生间距值：
输入 CSS

1. .my-element {
2.   margin: --spacing(4);
3. }

复制代码

编译后的 CSS

1. .my-element {
2.   margin: calc(var(--spacing) * 4);
3. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。