Tailwind CSS教程

比如我们正常开发写CSS是这样的

1
2
3
4
5
6
7
8

<div class="tittle">标题</div>

<style>
    .tittle{
        font-size: 18px;
        color:white;
    }
</style>

在html代码中指定class，然后在css里定义这个class的样式，也就是一个class里包含了多个样式。

而原子化css就是定义多个class，每个class包含一个样式，例如：

1

<div class="text-base p-1 border border-black border-solid"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.text-base {
    font-size: 16px;
}
.p-1 {
    padding: 4px;
}
.border {
    border-width: 1px;
}
.border-black {
    border-color: black;
}
.border-solid {
    border-style: solid;
}

好理解吧，这种属于是细粒度的class，叫做原子class，然后引用这些class。

而TailWindCSS就是定义了非常多的这种class方便你进行引用的一个css框架。

快速安装入门

本文是基于Vue3来进行安装使用的。

安装 Tailwind CSS 和 PostCSS 插件：

1

npm install tailwindcss postcss autoprefixer

在项目根目录下创建一个 tailwind.config.js 文件，用于配置 Tailwind CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: [
    './src/**/*.{vue,js,ts,jsx,tsx}',
    './public/index.html'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

在项目根目录下创建一个 postcss.config.js 文件，用于配置 PostCSS 插件：

1
2
3
4
5
6
7

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

在src/index.css创建一个css文件，引入TailwindCSS的内容

1
2
3

@tailwind base;
@tailwind components;
@tailwind utilities;

然后在main.js中引入这个css：

1
2
3
4
5

import { createApp } from 'vue' import './style.css' 
// 引入前面添加的css 
import './index.css' import App from './App.vue' 

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

然后就可以进行使用了！

1
2
3
4
5
6
7
8
9

<template>
  <div class="flex items-center justify-center h-screen bg-gray-100">
    <div class="p-6 bg-white rounded-lg shadow-lg">
      <h1 class="text-2xl font-bold text-gray-800">Hello Tailwind CSS!</h1>
      <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet.</p>
      <button class="px-4 py-2 mt-4 text-white bg-blue-500 rounded hover:bg-blue-600">Click me!</button>
    </div>
  </div>
</template>

我写过一篇关于DaisyUI框架的内容，是基于本框架实现的。

插件

由于这个命令太多而且较难记住，所以可以在VSCode 中可以安装 Tailwind CSS IntelliSense 插件

这样写 Tailwind CSS 会有提示，而且当鼠标悬浮到class上时，也会有有智能提示，可以查看它对应的样式。

常用写法

宽和高

以w-开头，表示宽;h-开头，表示高

后面接数字，1 = 4px = 0.25rem

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/* 普通数值 */
w-1	 //width: 0.25rem; /* 4px */
w-4	 //width: 1rem; /* 16px */

/* 百分比 */
w-1/2  //width: 50%;
w-1/4  //width: 25%;

/* 后面接 [] 里面可以填写具体的值 */
w-[4rem] //	width: 4rem;
w-[200px] //	width: 200px;

/* 固定单词 */
w-full	//width: 100%;
w-screen	//width: 100vw;
w-min	//width: min-content;
w-max	//width: max-content;
w-fit	//width: fit-content;

边距

margin的缩写是 m

1
2
3

m-1 // margin: 4px;
mx-1 // 在x轴上 margin-left: 4px; margin-right: 4px;
my-1 // 在y轴上 margin-top: 4px; margin-bottom: 4px;

padding 的缩写是p,使用方式与margin一样

1
2
3

p-1 // padding: 4px;
px-1 // 在x轴上 padding-left: 4px; padding-right: 4px;
py-1 // 在y轴上 padding-top: 4px; padding-bottom: 4px;

为单边添加边距: 使用 m{t|r|b|l}-{size} 实用程序控制元素一侧的边距。

1
2
3
4
5
6
7
8
9
10
11

/* margin */
<div class="mt-4">上</div>
<div class="mr-4">右</div>
<div class="mb-4">下</div>
<div class="ml-4">左</div>

/* padding */
<div class="pt-4">上</div>
<div class="pr-4">右</div>
<div class="pb-4">下</div>
<div class="pl-4">左</div>

字体大小

字体大小，使用 text-{size}。不同的值对应不同的大小

1
2
3
4
5
6
7
8

text-xs //（字体大小：.75rem；）
text-sm //（字体大小：.875rem；）
text-base //（字体大小：1rem;）
text-lg //（字体大小：1.125rem；）
text-xl //（字体大小：1.25rem；）
text-2xl //（字体大小：1.5rem；）
text-3xl //（字体大小：1.875rem；）
text-4xl //（字体大小：2.25rem；)

同样可以使用[]定义大小

1

text-[14px] // font-size:14px

hover悬停

使用hover,设置鼠标悬停后文本设为红色

1
2
3

<div class=" hover:text-red-400">
    TailWind css
</div>

响应式设计

Tailwind 中的每个实用程序类都可以有条件地应用于不同的断点，这使得在不离开 HTML 的情况下构建复杂的响应式接口变得轻而易举。

默认情况下有五个断点，受常见设备分辨率的启发：

例如：当宽度小于768px，把背景变为红色

1
2
3

<div class="md:bg-red-500">
    TailWind css
</div>

使用flex布局

• flex-row：水平排列子元素。
• flex-col：垂直排列子元素。
• flex-wrap：当子元素超出容器宽度时换行。
• justify-start、justify-end、justify-center、justify-between、justify-around：控制子元素在主轴上的对齐方式。
• items-start、items-end、items-center、items-baseline、items-stretch：控制子元素在交叉轴上的对齐方式。
• flex-1：将子元素的宽度或高度设置为 1，以填充剩余的空间。

简单导航栏

1
2
3
4
5
6
7
8

<nav class="flex justify-between items-center p-4 bg-gray-800 text-white">
  <a href="#" class="font-bold">Logo</a>
  <ul class="flex">
    <li><a href="#" class="mx-2">Home</a></li>
    <li><a href="#" class="mx-2">About</a></li>
    <li><a href="#" class="mx-2">Contact</a></li>
  </ul>
</nav>

使用了 flex、justify-between 和 items-center 类来实现导航栏的布局。子元素 a 和 ul 都被包裹在 nav 元素中，ul 元素上的 flex 类使其成为一个 flex 容器，子元素 li 和 a使用了 margin 类来实现间距。

常见布局

两栏布局

1
2
3
4
5
6
7
8
9
10

<div class="flex">
  <!-- 左侧栏 -->
  <div class="w-1/4 bg-gray-100">
    <p>左侧栏</p>
  </div>
  <!-- 右侧内容 -->
  <div class="w-3/4">
    <p>右侧内容</p>
  </div>
</div>

三栏布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="flex">
  <!-- 左侧栏 -->
  <div class="w-1/4 bg-gray-100">
    <p>左侧栏</p>
  </div>
  <!-- 主要内容 -->
  <div class="w-1/2">
    <p>主要内容</p>
  </div>
  <!-- 右侧栏 -->
  <div class="w-1/4 bg-gray-100">
    <p>右侧栏</p>
  </div>
</div>

等分布局

1
2
3
4
5
6
7
8
9
10
11

<div class="flex">
  <div class="flex-1 p-4 bg-gray-100">
    <p>等分1/3</p>
  </div>
  <div class="flex-1 p-4 bg-gray-200">
    <p>等分1/3</p>
  </div>
  <div class="flex-1 p-4 bg-gray-300">
    <p>等分1/3</p>
  </div>
</div>

响应式布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div class="flex flex-col md:flex-row">
  <!-- 左侧栏 -->
  <div class="w-full md:w-1/3 p-4 bg-gray-100">
    <h2 class="text-lg font-medium mb-4">左侧栏</h2>
    <ul class="list-disc pl-4">
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
    </ul>
  </div>
  <!-- 右侧内容 -->
  <div class="w-full md:w-2/3 p-4 bg-white">
    <h2 class="text-lg font-medium mb-4">右侧内容</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
  </div>
</div>

黑白主题切换

在 tailwind.config.js 配置文件中定义颜色变量。

1
2
3
4
5
6
7
8
9
10
11
12

module.exports = {
  theme: {
    extend: {
      colors: {
        black: '#000',
        white: '#fff',
      },
    },
  },
  variants: {},
  plugins: [],
}

在 App.vue 的 <template> 标签中添加一个切换主题的按钮，并使用 isDark 变量来切换主题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<template>
  <div :class="{ 'dark': isDark }">
    <div class="bg-white text-black">
      <p>Some text</p>
    </div>
    <button @click="toggleTheme">Toggle theme</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const isDark = ref(false)

    const toggleTheme = () => {
      isDark.value = !isDark.value
      const html = document.querySelector('html')
      html.classList.toggle('dark')
    }

    return {
      isDark,
      toggleTheme,
    }
  },
}
</script>

使用 Tailwind CSS 的 dark 模式类来定义黑色主题，并使用颜色变量来设置背景和文本颜色。

1
2
3

<div class="bg-white text-black dark:bg-black dark:text-white">
  <p>Some text</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        black: '#000',
        white: '#fff',
      },
      darkMode: 'class',
    },
  },
  variants: {},
  plugins: [],
}

完成上述操作，即可实现黑白切换。

daisyUI的黑白效果会更好一些，推荐。

记忆规律

多态：多态是指一种模式对应多个属性。

其他

影响基础样式

Tailwind css会默认将一些基础样式设置为普通文字样式，包括以下几种：

• 在Tailwindcss中 h1到 h6 标签，所有标题元素，其字体大小与字体粗细与普通文本无差别。
• 在Tailwindcss中 有序列表和无序列表: ul,li默认情况下是无样式的，没有符号标记和数字，同时也没有外边距和内边距
• 在Tailwindcss中 标题、块引用、段落等元素的所有默认外边距。
• 正常情况下图片、svg、video、canvas是行内块元素， 在Tailwindcss中 默认设置为 display:block
• Tailwindcss重写了border所有元素的默认边框样式。

如果想去掉影响的这些部分，那么可以：

注释掉 @tailwind base; ,里面存放的是tailwind重写原生标签后的初始样式,把它删了就可以解决上面的一些问题，但可能也会导致一些不可预料的问题。

1
2
3

// @tailwind base; 
@tailwind components;
@tailwind utilities;

或者

在全局的css文件里 重写样式,用@layer base重新自定义样式;

@layer指令，Tailwind 将自动将这些样式移到 @tailwind base的同一位置，以避免出现一些意

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

@tailwind base;
@tailwind components;
@tailwind utilities;

// 自定义样式
 @layer base {
  h1 {
      @apply text-2xl;
  }
  h2 {
      @apply text-xl;
  }
  h3 {
      @apply text-lg;
  }
}

参考

Vue中使用 Tailwind CSS

Tailwind css 在项目中的使用与问题

感谢！