tailwindcss 101

tailwindcss简介

一、概念

提供预设类（padding、text、transition等）直接在html 标签上使用，通过编译器编译，生成样式表，从而改变界面外观。

---

二、优劣分析

1. 快速开发，直接在标签中设置样式😊

2. 高度定制😊

3. 响应式设计😊

4. 便于AI从截图复刻成代码😊

5. 破坏关注点分离原则😭

---

三、安装

pnpm i tailwindcss postcss 
pnpm dlx tailwindcss init -p

创建postcss.config.js，添加tailwindcss插件，使得css被postcss编译

export default {
  plugins: {
    tailwindcss: {},
  },
};

创建tailwind.config.js，声明需要扫描和监听的文件

module.exports = {
  darkMode: "class",  //开启暗黑模式
  presets：'', //预设样式
  prefix: '', //类名前缀
  separator: '_', //状态变量与基础类组合时的分隔符，默认是:
  content: ["./src/**/*.tsx"],  //需要监听的文件
  theme: {  //覆盖样式
    
    extend: {  //如果有预设值则覆盖，否则为扩展
       primary: '#',
       secondary: '#',
    },
  },
  plugins: [],
}

将tailwind的基本指令引入到主样式表中

//global.css

@tailwind base;  //重置样式
@tailwind components;  //组合样式
@tailwind utilities;  //原子化样式

---

四、内部指令及函数

使用@apply进行组合

.menu{
  @apply font-bold mt5
}

使用theme函数获取tailwindcss内部变量

p{
  background: theme('colors.bg')
}

直接在html上写自定义值

<p w-[400px] h-[400px]>test</p>

---

五、响应式设计

默认5个断点：

1. sm: 640px

2. md: 768px

3. lg: 1024px

4. xl: 1280px

5. 2xl: 1536px

//图片在屏幕768下宽度为40px，在1024宽度为80px
<img md:w-40 lg:w-80 />