Tailwind介绍：

        Tailwind CSS 是一个功能类优先的 CSS 框架，它提供了大量预定义的原子化 CSS 类（如 flex、mt-4、text-center 等），允许开发者直接在 HTML 中组合这些类来快速构建界面，而无需编写传统的自定义 CSS。

        即tailwind的作用是省去编写css文件的步骤，直接在html文档里面编写标签的class属性，通过指定的原子类进行样式的设置：

<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>

<!--
    这里text-3x1是设置文字大小
    font-bold设置文字加粗
    underline设置下划线
-->

Tailwind的安装、配置：

   安装：

        一、vite项目里(主示例)：

在创建vite项目后可以使用下面指令安装：

npm install tailwindcss @tailwindcss/vite

        二、体验CDN：

使用体验 CDN 直接在浏览器中试用 Tailwind，无需任何构建步骤。Play CDN 仅用于开发目的，不适用于生产。

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

   配置：

        一、配置vite插件：

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

vite.config.ts 文件内

import { defineConfig } from 'vite'

import tailwindcss from '@tailwindcss/vite'        // 导入
export default defineConfig({
  plugins: [
    tailwindcss(),        // 配置
  ],
})

        二、导入 Tailwind CSS：

在你的 CSS 文件(一般是全局css文件)中添加一个 @import 以导入 Tailwind CSS。

@import "tailwindcss";

        三、引入该css文件：

在main.ts里面引入该文件，以便配置生效：
 

import { createApp } from 'vue'
import App from './App.vue'
import '@/assets/tailwind.css'        // 导入css文件

const app = createApp(App)
app.mount('#app')

在完成上面的配置后就基本可以使用tailwind了，下面讲解一下它的一些基本使用。

Tailwind基础使用：

    这里仅作一些重要且基础样式的示例，具体其它样式请自行查阅官方文档。

   尺寸：

        一、width：

原子类如下：

1、w-<number>                注：之后出现的这种格式的number单位为1/4rem,即默认1=4px;

<div class="w-96 ...">w-96</div>
<div class="w-80 ...">w-80</div>
<div class="w-64 ...">w-64</div>
<div class="w-48 ...">w-48</div>

        w-48 === width:[48*(1/4rem)]px === width:192px;

2、使用百分比：

        w-1/2                // 宽为父元素的二分之一

        w-1/3                // 宽为父元素的三分之一

        w-full                // 宽和父元素一样

3、使用容器比例：

       使用如下图(本质也是一组固定的值)：

        

4、设置宽高：

        size-<number>

<div class="size-16 ...">size-16</div>
<div class="size-20 ...">size-20</div>
<div class="size-24 ...">size-24</div>
<div class="size-32 ...">size-32</div>
<div class="size-40 ...">size-40</div>

5、自定义：

        w-[自定义值]

        w-[16px]        // 宽为16px

        w-[100vw]     // 宽设置为100vw

6、css变量：

        w-(<custom-property>)        

        

如：
<div class="min-w-(--my-min-width) ...">
  <!-- ... -->
</div>

        二、min-width:

设置元素的最小宽度，它的值的设计和width基本相同，包含：

        1、min-w-<number>

        2、min-w-1/2

        3、min-w-sm

        4、min-w-[自定义值]

        5、min-w-(<custom-property>)

        三、max：

设置元素的最大宽度，它的值的设计和min-width基本相同，包含：

        1、min-w-<number>

        2、min-w-1/2

        3、min-w-sm

        4、min-w-[自定义值]

        5、min-w-(<custom-property>)

        四、height  min-height  max-height：

分别设置高度、最小高度、最大高度，使用的值和宽度、最小宽度、最大宽度相同。

   间距：

        一、padding：

通过原子类 p 控制，其值也基本是上面width那种，如：

        p-10                // 对应 padding:40px;

        p-[10px]          // 对应 padding:10px;

除此之外还有控制方向的：

        px-10              // 水平padding,对应：padding:0 40px;

        py-10              // 垂直padding,对应：padding:40px 0;

        pt/pr/pb/pl       // 分别对应padding-top/right/bottom/left;

<div>
  <div dir="ltr">
    <div class="ps-8 ...">ps-8</div>
    <div class="pe-8 ...">pe-8</div>
  </div>
  <div dir="rtl">
    <div class="ps-8 ...">ps-8</div>
    <div class="pe-8 ...">pe-8</div>
  </div>
</div>

        二、margin：

通过原子类 m 控制，其值也基本是上面width那种，如：

        m-10                // 对应 margin:40px;

        m-[10px]          // 对应 margin:10px;

除此之外还有控制方向的：

        mx-10              // 水平margin,对应：margin:0 40px;

        my-10              // 垂直margin,对应：margin:40px 0;

        mt/mr/mb/ml       // 分别对应margin-top/right/bottom/left;

<div class="mt-6 ...">mt-6</div>
<div class="mr-4 ...">mr-4</div>
<div class="mb-8 ...">mb-8</div>
<div class="ml-2 ...">ml-2</div>

   文本：

        一、font-size/line-height：

通过font原子类控制:

对于font-size,可选值如下：

        1、text-[自定义值]                              // 如font-[4px] == font-size:4px;

        2、text-<custom-property>                // css变量使用

        3、text-xs/sm/lg                                 // 一组预设值

对于line-height,其和font-size整合到了一起，变为font-字体大小/行高：

        1、text-[4px]/[16px];

            等价于：font-size:4px;  line-heigth:16px;

        二、font-family：

通过font类实现：

        1、font-sans                                                      // 前三个为一组预设的字体

        2、font-serif

        3、font-mono

        4、font-(family-name:<custom-property>)        // 使用自定义css属性

        5、font-[自定义值]                                             // 使用自定义值

        三、font-weight：

也是通过font类实现：

        1、font-thin/light/normal/bold                // 对于的值参考文档

        2、font-[自定义]                                    // 自定义

        四、color：

设置文字颜色，通过text类实现：
        1、font-red                // 红色

        2、font-red-50           // 淡红色

        3、font-[自定义]         // 自定义颜色

<p class="text-blue-600>The quick brown fox...</p>

        以上就是一些使用的基本示例，完整tailwind原子类很多很多，完全能满足使用需要，具体查看官方文档,同时对于悬浮聚焦等状态、响应式、主题变量也是最好参考官方文档，本篇仅作引出tailwind,具体学习查看文档无疑是一个好的选择。

周总结：

    学习内容：

1、算上上周末，较为系统的学习了tailwind，使用起来效果还行，不用写css文件太舒服了(*^_^*)

2、全面的学习了一下SSE，拓展知识面

3、学习了大模型和智能体的使用，挺有意思的

4、复习了一下Echarts的使用，还是不太会，下次抽时间系统的学习一下

5、学习了vue3项目的搭建和一些方便编程的工具包，如自动路由。

    项目进度：

    本周开始写新的项目了，第一次写vue3项目，感觉不太熟练，配置一些插件之类的浪费了不少时间，我主要写的是后台，首页部分倒是写完了，对于tailwind和vue组件倒是有了一定的熟练度，后面要加快进度了，后台部分还剩不少，还要写前台的社区。/(ㄒoㄒ)/~~

# vue.js # 前端 # javascript
Logo
北京朝阳AI社区

更多推荐

cover

Vision Transformer(ViT)入门指南：从图像块嵌入到大模型视觉理解(收藏价值满满)

avatar 北京朝阳AI社区

Java面试实录：房产金融背景下的Spring AI、RAG与ORM深度剖析

本文通过一场幽默且深入的Java面试，探讨了在房产金融业务场景中，Spring AI、RAG架构、向量数据库、Agentic RAG以及JPA、Hibernate、HikariCP、Flyway等核心技术栈的应用与优化。面试过程循序渐进，从基础概念到实战挑战，并辅以详细的技术解析，旨在帮助Java开发者提升技术能力，应对复杂业务场景。

avatar 北京朝阳AI社区
cover

YOLOv10项目：大豆识别检测系统【数据集+源码+UI界面+摄像头实时检测】

avatar 北京朝阳AI社区