vue3.2之 Tailwind CSS

最新推荐文章于 2024-08-31 21:18:22 发布

小小亮01

最新推荐文章于 2024-08-31 21:18:22 发布

阅读量2.7k

点赞数 2

分类专栏： vue3 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_43845137/article/details/127294361

版权

vue3 专栏收录该内容

51 篇文章 4 订阅

订阅专栏

vue3.2之 Tailwind CSS

安装：npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
官网：官网
- 文档：配置文档
生成项目依赖：npx tailwindcss init -p ( tailwind.config.js 配置文件 )
注意点：
- Tailwind CSS 是一个由js编写的CSS 框架他是基于postCss 去解析的

1：Tailwind CSS 定义容器

1-1 tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
    // 设置 主体的容器 容器居中 还有 内边距10px
    container: {
      center: true,
      padding: '10px'
    }
  },
  plugins: []
}

1-2 使用

      <div class="container mx-auto bg-red-500">
        测试的
      </div>

1-3 效果

2：Tailwind CSS 定义盒子模型

1：怪异盒模型 box-border；宽度（ p + content）
2：标准盒模型 box-content；宽度 + p + content
需求：（默认的基准 * 4 ）
- 1-1：怪异盒模型 box-border,定义一个宽高为 32 （ 32 * 4 = 128px的盒子），边框为16px，mairgin为4px
- 1-2：怪异盒模型 box-border,定义一个宽高为 32 （ 32 * 4 = 128px的盒子）
- 1-3：标准盒模型 box-content,定义一个宽高为 32 （ 32 * 4 = 128px的盒子）

<!--1-1 效果 32 * 4 = 128 其中padding为16px border为4px  于是内容剩下88px * 88px marigin4px -->
<div class="box-border h-32 w-32 p-4 border-4 m-1">测试的</div>

<!--1-2 效果 32 * 4 = 128 内容剩下128px * 128px -->
<div class="h-32 w-32 bg-black text-white">222</div>

<!--1-3 效果 32 * 4 = 128 宽度128 + p16*2 + b4px*2 = 168px -->
<div class="box-content h-32 w-32 p-4 border-4">盒子</div>

1-1 效果
在这里插入图片描述
1-2 效果

1-3 效果

3：Tailwind CSS 定义 Display 展示渲染

Display 控制元素的显示和隐藏还有展示其他行内块等

    <div class="block">测试- 显示</div>
    <div class="hidden">测试- 隐藏</div>

效果

4：Tailwind CSS 定义浮动与清除浮动

浮动
- float-right、float-left、float-none
清除浮动
- clear-left、clear-right、clear-both、clear-none

    <div class="w-32 h-32 bg-red-700">
      <div class="float-right">11</div>
      <div class="float-right">22</div>
    </div>
    <div class="float-right text-black">33</div>

效果

5：Tailwind CSS 定义 img的展示（Position）

链接

6：Tailwind CSS 定义 overflow 超出

overflow

    <div class="w-20 h-20 overflow-auto bg-red-500">我是菜鸡菜鸡菜鸡菜鸡菜鸡菜鸡菜鸡菜鸡</div>
    <div class="w-20 h-20 overflow-hidden m-4 bg-red-500">我是菜鸡菜鸡菜鸡菜鸡菜鸡菜鸡菜鸡菜鸡</div>
    <div class="w-20 h-20 overflow-visible m-4 bg-red-500">我是菜鸡菜鸡菜鸡菜鸡菜鸡菜鸡菜鸡菜鸡菜鸡菜鸡</div>
    <div class="w-20 h-20 overflow-scroll m-20 bg-red-500">我是菜鸡菜鸡菜鸡菜鸡菜鸡菜鸡菜鸡</div>
    <div class="w-20 h-20 overflow-x-scroll m-20 bg-red-500">我是菜鸡菜鸡菜鸡菜鸡菜鸡菜鸡菜鸡</div>
    <div class="w-20 h-20 overflow-y-scroll m-20 bg-red-500">我是菜鸡菜鸡菜鸡菜鸡菜鸡菜鸡菜鸡</div>

在这里插入图片描述

7：Tailwind CSS 定义定位

static、fixed、absolute、relative、sticky

    <div class="w-20 h-20 bg-red-500 relative">
      <div class="w-10 h-10 bg-yellow-100 absolute top-5 left-5">儿子</div>
    </div>

效果

8：Tailwind CSS 定义 Z-Index

    <div class="w-32 h-32 bg-red-500 relative">
      <div class="w-10 h-10 bg-yellow-100 absolute top-10 left-10 z-10">儿子</div>
      <div class="w-10 h-10 bg-green-100 absolute top-10 left-10 z-20">儿子2</div>
    </div>

效果

9：Tailwind CSS 定义 flex布局

flex、flex-row（横向）、flex-col（竖）、flex-wrap（换行）、flex-nowrap（不换行）、Flex Grow

    <div class="flex flex-row">
      <div class="w-10 h10 bg-red-500 m-2">1</div>
      <div class="w-10 h10 bg-red-500 m-2">2</div>
      <div class="w-10 h10 bg-red-500 m-2">3</div>
    </div>
    <div class="flex flex-col">
      <div class="w-10 h10 bg-red-500 m-2">11</div>
      <div class="w-10 h10 bg-red-500 m-2">22</div>
      <div class="w-10 h10 bg-red-500 m-2">33</div>
    </div>

    <div class="flex flex-wrap w-32">
      <div class="w-10 h10 bg-red-500 m-2">1</div>
      <div class="w-10 h10 bg-red-500 m-2">2</div>
      <div class="w-10 h10 bg-red-500 m-2">3</div>
      <div class="w-10 h10 bg-red-500 m-2">4</div>
    </div>
    <div class="flex flex-nowrap w-32">
      <div class="w-10 h10 bg-red-500 m-2">1</div>
      <div class="w-10 h10 bg-red-500 m-2">2</div>
      <div class="w-10 h10 bg-red-500 m-2">3</div>
      <div class="w-10 h10 bg-red-500 m-2">4</div>
    </div>

	3：具体显示
    <div class="flex w-32 justify-center justify-item-center bg-yellow-400">
      <div class="w-10 h10 bg-red-500 m-2">1</div>
    </div>

效果
3：居中显示

10：Tailwind CSS 定义 padding、marigin

padding的使用
- 01：p-0为 0px
- 02：p-px 为1px 四面有
- 03：p-1 为0.25rem （ 0.25rem * 16） = 4px （注意点：16为根节点字体大小）
- 04：px-1 为 left和right 的左右 4px
- 05：px-4 为 top和botton 上下的 16px
- 06：pb-1 为 bottom 下方 4px
- 07：pt-1 pb-1 pr-1 pl-1 为上下左右
marigin的使用如上类似

    <!-- p-0 间距为0 -->
    <div class="w-32 h-32 bg-yellow-400 p-0">111</div>
    <!-- p-px 为 1px  -->
    <div class="w-32 h-32 bg-yellow-400 p-px">111</div>
    <!-- p-1 = 0.25rem; 0.25 * 16 =  4px -->
    <div class="w-32 h-32 bg-yellow-400 p-1">111</div>
    <!-- p-4 = 1rem ;1 * 16 =  16px -->
    <div class="w-32 h-32 bg-yellow-400 p-4">333</div>

    <!-- p-1 = 0.25rem; 0.25rem * 16 = 4px px-代表的是 left和right -->
    <div class="w-32 h-32 bg-yellow-400 px-1">222</div>
    <!-- p-1 = 1rem; 1rem * 16 = 16px px-代表的是 left和right 左右各16px-->
    <div class="w-32 h-32 bg-yellow-400 px-4">222</div>

    <!-- p-1 = 0.25rem; 0.25rem * 16 = 4px px-代表的是 left和right -->
    <div class="w-32 h-32 bg-yellow-400 px-1">222</div>
    <!-- p-1 = 1rem; 1rem * 16 = 16px px-代表的是 left和right 左右各16px-->
    <div class="w-32 h-32 bg-yellow-400 px-4">222</div>
    <!-- p-1 = 1rem; 1rem * 16 = 16px py-代表的是 top和bottom 上下各16px-->
    <div class="w-32 h-32 bg-yellow-400 py-4">222</div>

   <!-- pb-1 = 0.25rem; 0.25rem * 16 = 4px 下方4px  -->
    <div class="w-32 h-32 bg-yellow-400 pb-1">222</div>

11：Tailwind CSS 定义定义盒子的间距 space-x|-y

space-x|-y
- 容器盒子距离x或者y的值的设置

    <div class="flex space-x-4">
      <div class="w-10 h-10 bg-red-500">1</div>
      <div class="w-10 h-10 bg-red-500">2</div>
      <div class="w-10 h-10 bg-red-500">3</div>
    </div>
    <div class="flex flex-col space-y-4 mt-4">
      <div class="w-10 h-10 bg-red-500">1</div>
      <div class="w-10 h-10 bg-red-500">2</div>
      <div class="w-10 h-10 bg-red-500">3</div>
    </div>