TailwindCss基本介绍和使用

1,TailwindCss是什么

TailwindCss 官方文档

tailwindcss 是一个 CSS 框架,主要特点是 utility class,实现了原子化 css:1个class代表1个css 属性。

举例:

Classcss属性
inline-blockdisplay: inline-block;
pr-pxpadding-right: 1px;
p-2padding: 0.5rem; /* 8px */
w-3width: 0.75rem; /* 12px */
text-sky-400color: rgb(56 189 248);

1,颗粒度

<div style="display: inline-block; background-color: rgb(14 165 233); padding: 14px">点击</div>

<!-- tailwindcss -->
<div class="inline-block bg-sky-500 p-4">点击</div>

<!-- 前端纯UI框架,比如 bootstrap-->
<div class="button">点击</div>

<!-- 前端组件库,比如 element-plus-->
<Button type="primary">点击</Button>

可以看到颗粒度是逐步增大并内聚,自由度降低。tailwindcss 在第2层。

2,优点

  1. 原子化 css 可以省去起名 class 的烦恼,而且语义化很强。虽然BEM命名也能解决这个问题,但 tailwindcss 还有其他好处
  2. 契合 design token

design token 简单理解:是一种设计师和开发之间一种表达设计决策的通用语言,它可以确保构建的产品在不同平台和设备上都与设计稿一致,确保设计稿被高效、准确地还原。
对前端来说,就是一些定义好的全局 css 变量。包括布局,颜色,尺寸,间隔等等。

  1. 支持 breakpoint css(也支持自定义)修饰符,也就是响应式媒体查询。
<!-- 默认16,medium 768px屏幕下 32,large 1024px屏幕下48 -->
<img class="w-16 md:w-32 lg:w-48" src="...">
  1. 也支持伪类,暗黑模式等修饰符
<div class="bg-black hover:bg-white">content</div>
  1. 除了预设的所有 css 属性外,也支持自定义。比如更精细化的颜色和尺寸,实现方式:
    • 开发并引入 plugin 和 preset
    • 直接在配置文件中自定义(类似于webpack 的配置文件一样,可以进行合并)
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,vue,js}"],
  theme: {
    // 在 extend 中定义的算是扩展
    extend: {
      // 默认是没有下面 spacing 设置的,这里扩展后,可以在一些距离相关的 class 上使用了。比如 p-13, m-15
      spacing: {
        '13': '3.25rem',
        '15': '3.75rem',
      }
    },
  },
}
  1. 和其他的 css 预处理器类似,也定义了一些 mixins 来更好的使用

举例:使用 @apply 支持属性组合后复用

.primary-button {
  @apply inline-block bg-sky-500 p-4;
}

@apply 是一个废弃的属性(浏览器已经不支持了)。作用就像上面展示的这样,
不过 tailwindcss 和 postcss 都把它实现了。

2,引入

  1. 安装
npm install -D tailwindcss
  1. 创建配置文件tailwind.config.js
npx tailwindcss init

指定作用目录,并增加对 vue 文件的识别

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,vue,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
  1. 在项目的公共 css 文件(src/style.css)中添加以下内容,用 @tailwind 指令添加 Tailwind 功能模块
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 运行 tailwindcss CLI 工具,指定源文件 ./src/style.css 和输出文件./src/output.css,开启监听生效目录中所有出现的 class 类名的变化,并编译为 CSS。
npx tailwindcss -i ./src/style.css -o ./src/output.css --watch
  1. src/main.ts 中引入 tailwindcss 编译的输出文件./src/output.css
import { createApp } from "vue";
import "./style.css";
import "./output.css";
import App from "./App.vue";

createApp(App).mount("#app");
  1. 最后,设置同时启动 vite 项目和 tailwindcss 监听的命令,参考 npm 并行执行命令
{
  "scripts": {
    "serve": "concurrently \"npm run dev\" \"npm run tail\"",
    "dev": "vite",
    "tail": "tailwindcss -i ./src/style.css -o ./src/output.css --watch",
  },
}

concurrently 是一个跨平台并行执行命令的依赖,需要下载。

最后,执行npm run serve 就可以了。

3,使用

官方文档 比较详细,这里不再赘述

简单例子

<template>
  <!-- width: 2.5rem; height: 2.5rem-->
  <div class="w-10 h-10">下雪天的夏风</div>
</template>

4,一些问题

2,需要经常翻阅文档,不会降低效率吗

这个属于是熟练度的问题了,并且因为 tailwindcss 的语义化很强,所以其实到还好。

并且 vscode 也有对应的插件TailwindCSS Tune增加提示,上手起来会比较快。
在这里插入图片描述

3,维护会很困难吗?

还是那句话,因为语义化很强,所以即便经过了人员调动,上手还是很快的。

并且因为原子化css,不用担心 class 中样式的覆盖问题

4,体积会很大吗?

在 3.x 版本实现了即时编译(JIT)替代了全部建置与消除,因而大幅减少了构建 CSS 的时间和大小。

全部建置与消除:先根据配置文件中的生效目录,生成所有可能的 css 组合。再通过其他的工具,如 PurgeCSS(tailwindcss@2.x 使用的),遍历所有的生效目录,从所有的 css 组合并消除未使用的。
由于生效目录和媒体查询的数量可能较多,所以产生的 css 组合的数量是翻倍的,会导致构建时间长,并且在消除之前的 CSS 文件很大。

以上。

5,实战问题总结

tailwindcss 实战总结


参考:

https://zh.wikipedia.org/zh-hans/Tailwind_CSS

https://juejin.cn/post/7012212259950690335

https://www.zhihu.com/question/337939566

  • 6
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Tailwind CSS 是一个高度可定制的 CSS 框架,它提供了大量的实用类,让开发者可以快速构建现代化的用户界面。下面是使用 Tailwind CSS 的一般步骤: 1. 安装 Tailwind CSS:可以通过 npm 或 yarn 来安装 Tailwind CSS。在命令行中运行以下命令来进行安装: ``` npm install tailwindcss ``` 或 ``` yarn add tailwindcss ``` 2. 创建配置文件:在项目的根目录中创建一个名为 `tailwind.config.js` 的文件。在该文件中,你可以自定义 Tailwind CSS 的配置选项,并添加你自己的样式。 3. 引入 Tailwind CSS:在你的 CSS 文件中引入 Tailwind CSS。你可以选择使用 `@import` 或 `@use` 来引入 Tailwind CSS。如果使用 Sass,可以在你的 `.scss` 文件中添加以下代码: ```scss @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; ``` 4. 使用实用类:Tailwind CSS 的核心概念是使用实用类(Utility Classes)。你可以在 HTML 元素上直接添加这些类,以应用相应的样式。例如,要将一个按钮样式为蓝色和大号,可以添加以下类: ```html <button class="bg-blue-500 text-white text-lg">按钮</button> ``` 5. 自定义样式:如果你需要自定义样式,可以在配置文件中进行全局配置,或者在需要的地方使用行内样式。你可以根据自己的需求,修改颜色、字体、边距等样式。 这只是一个简单的使用方法,Tailwind CSS 还有更多功能和选项可以探索。你可以查阅官方文档来获取更详细的信息:https://tailwindcss.com/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

下雪天的夏风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值