tailwindcss 系列 - 准备

原子化 CSS 框架，意思就是每一条规则使用一个 class 表示，通过组合不同 class 修改样式，原则是尽量减少 CSS 样式编写。

安装

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
npm install -D prettier prettier-plugin-tailwindcss

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

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{html,js,ts,jsx,tsx,vue,mdx}"],
  // nuxt
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

// main.css
@tailwind base;
@tailwind components;
@tailwind utilities;

// nuxt.config.js
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ["~/assets/css/main.css"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

// .prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

编辑器

Tailwind CSS IntelliSense

CSS 处理器结合

postcss

postcss-import 使用

npm install -D postcss-import

// postcss.config.js
module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

嵌套

// postcss.config.js
module.exports = {
  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

如果你在项目中使用 postcss-preset-env ，禁用嵌套

// postcss.config.js
module.exports = {
  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": "postcss-nesting",
    tailwindcss: {},
    "postcss-preset-env": {
      features: { "nesting-rules": false },
    },
  },
};

变量

推荐使用 css 变量和 theme 函数

:root {
  --theme-color: #52b3d0;
}

/* ... */

.btn {
  background-color: var(--theme-color);
  /* ... */
}

.btn {
  background-color: theme("colors.blue.500");
  padding: theme("spacing.2") theme("spacing.4");
  /* ... */
}

前缀

// npm install -D autoprefixer
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

使用 Sass、Less、Stylus

通过在文件扩展名前加上 .module 来结合使用 CSS modules 和预处理器，例如 style.module.scss

不能将 Tailwind的 theme() 函数的输出输入预处理器函数

使用 !important 和 @apply 需要使用插值来正确编译

• Sass

/* wrong */
.alert {
  @apply bg-red-500 !important;
}
/* right */
.alert {
  @apply bg-red-500 #{!important};
}
/* wrong */
@media screen(md) {
  .foo {
    color: blue;
  }
}
/* right */
@media (screen(md)) {
  .foo {
    color: blue;
  }
}

• Stylus

/* Stylus */
/* 不能在 @css 块中使用任何 Stylus 功能 */
/* wrong */
.card {
  @apply rounded-lg bg-white p-4;
}
/* right */
@css {
  .card {
    @apply rounded-lg bg-white p-4;
  }
}
/* wrong */
@media screen(md) {
  .foo {
    color: blue;
  }
}
/* right */
@media ({'screen(md)'}) {
  .foo {
    color: blue;
  }
}

压缩

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
  },
};

兼容性

Tailwind 还包括一些尚未被所有浏览器支持的前沿功能的 API，例如 :focus-visible 和 backdrop-filter