tailwind css

https://tailwindcss.com
tailwindcss 样式速查 https://tailwindcss.com/docs/container

预定义的 css库，每个 class类名，都代表一个属性
原子理念的css方案，表现力很强的语义化类型使用 Tailwind CSS重构后，节省了接近70%的css代码，
缺点：class类名很长，貌似项目越大，Tailwind CSS节省的 css代码越多。

npm install -D tailwindcss
// Created Tailwind CSS config file: tailwind.config.js
npx tailwindcss init
import 'tailwindcss/base.css';
import 'tailwindcss/components.css';
import 'tailwindcss/utilities.css';

解决 css维护问题

• 统一的变量维护，color色值
• 响应式，主题切换

tailwind 设计理念

1. 原子粒度的 css
2. 组件化，语义化，antd；可定制性差

tailwind 价值体现

1. 灵活定制化
   1. 解决 style行内样式的复用性
   2. 解决类似 antd组件的定制化
2. 个性化
   1. 适合个性化的前台项目
3. 交互性

tailwind.config.js

module.exports = {
  // tailwind 应用范围
  content: [
    "./public/**/*.html",
    "./src/**/*.{astro,js,jsx,svelte,ts,tsx,vue}",
  ],
  // important: true,
  theme: {
    extend: {
        borderRadius: {
        xl: ".75rem",
      },
      colors: {
        black: "#12151E",
        "hot-pink": "#fd2d78",
      },
      fontFamily: {
        display: ["Londrina Solid", "sans-serif"],
        body: ["Poppins", "sans-serif"],
      },
    },
    borderColor: (theme) => ({
      ...theme("colors"),
      default: theme("colors.black", "currentColor"),
    }),
    inset: (theme, { negative }) => ({
      ...theme("spacing"),
      ...negative(theme("spacing")),
      0: "0",
      auto: "auto",
    }),
  },
  plugins: [
  ]
}

index.less

导出基础的 tailwind css组件，

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

然后在 index.js import './index.less'