Tailwind Css入门

什么是Tailwind CSS

tailwindcss 是一个 CSS 框架，主要特点是 utility class(功能类)，实现了原子化 css：1个class代表1个css 属性

Class	Css属性
inline-block	display-inline-block
pr-px	padding-right：1px
w-2	width：0.5rem（16px）
text-sky-400	color:rgb(56 189 248)

传统情况下，开发以下功能会先写html结构，然后编写对应的css

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

使用 Tailwind，您可以通过直接在 HTML 中应用预先存在的类来设置元素的样式

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

这种方法使我们无需编写自定义的 CSS 即可实现一个完全定制的组件设计，代码变的精简了很多

tailwind常用语法

1. 盒模型相关
   • w-xx 宽度
   • h-xx 高度
   • bg-xx 背景
   • min/max-w/h-xx 最小/大宽度/高度
   • p-xx表示padding，pt-20表示padding-top: 80px
   • m-xx表示margin，ml-5表示margin-left: 20px
   • px-xx表示左右边距，py-xx表示上下边距
   • w-[101px]
   • border-red-950
   • rounded-2xl
   • 位置absolute top-xx left-xx
2. 文字相关
   • text-xl 大小
   • text-sky 颜色
   • text-center 对齐方式
   • font-thin 字体粗细
3. flex相关
   • flex=display：flex（用在父容器中）
   • flex-wrap/nowrap（是否允许溢出）
   • justify-center、justify-between

如何引入项目使用

以vue3+ts+vite为例

第一步：创建项目

npm create vite@latest my-project -- --template vue
cd my-project

第二步：安装tailwindcss及其对等依赖项，然后生成tailwind.config.js和postcss.config.js文件

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

第三步：在tailwind.config.js文件中添加所有模板文件的路径

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

第四步：将tailwind的每个层的@tailwind指令添加到您的/src/style.css文件

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

第五步：npm run dev

第六步：使用

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

在项目中如何定制化自己的样式

1. @apply：使用 @apply 将任何样式内联到您自己的自定义 CSS 中
2. @layer：使用 @layer 指令告诉 Tailwind 属于一组自定义样式的 “块”。在 base, components, utilities 有效

.btn {
  @apply w-16 h-10 bg-sky-400 border-2 border-gray-400 rounded-sm ml-2 text-center;
}

@layer components {
  .pinkBox {
    @apply w-[200px] h-52 bg-pink-100 mb-5
  }
}

functions-and-directives中可以学习更多

tailwind.config.js 配置参考

1. content：指定了 Tailwind 应该扫描哪些文件以找到类名并生成最终的 CSS 文件，这是 Tailwind 的“内容提取”功能的一部分，用于确保仅包含实际在项目中使用的样式，从而减小最终生成的 CSS 文件的大小

   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
   

2. theme：允许自定义 Tailwind 的默认主题颜色、间距、字体，屏幕大小等。

   theme: {
       extend: {
         colors: {
           customBlue: "#1e90ff", // 添加一个新的颜色
           c1: "#333333",
         },
         spacing: {
           px: "300px",
           1: "0.25rem",
         },
         fontFamily: {
           sans: ["Graphik", "sans-serif"], // 自定义无衬线字体栈
           serif: ["Merriweather", "serif"], // 自定义衬线字体栈
         },
         screens: {
           sm: "640px", // 自定义小屏幕断点
           md: "768px", // 自定义中等屏幕断点
         },
       },
     },
   

3. plugins：允许添加自定义插件或第三方插件，以扩展 Tailwind 的功能

   plugins: [
       // 引入自定义插件
       require("./src/plugins/customBakcgroundColor"),
   
       // 引入第三方插件（假设该插件已经通过 npm 安装）
       // 注意：这里的路径和插件名应该根据实际的插件来确定
       // require('@some-third-party/tailwindcss-plugin'),
   
       // 也可以直接在数组中定义插件对象（如果插件支持这种方式）
       // {
       //   function: require('./plugins/anotherCustomPlugin'),
       //   options: {
       //     // 插件的选项配置
       //   },
       // },
     ],
   

官方文档：https://www.tailwindcss.cn/docs/installation