Tailwind CSS

安装

# 安装tailwindcss postcss autoprefixer
# vanilla
$ npm install -D tailwindcss postcss-cli autoprefixer
# vue
$ npm install -D tailwindcss postcss autoprefixer

# 生成tailwindcss和postcss配置文件
$ npx tailwindcss init -p

引入

/*
  在项目资源目录下新建css文件，引入tailwindcss三大部件
  ./your-css-folder/styles.css
*/
@tailwind base;
@tailwind components;
@tailwind utilities;

配置

// 配置tailwindcss.config.js
module.exports = {
  // 去除项目中没有用到的tailwindcss的css样式
  purge: [
    /* vue项目 */
    './dist/index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    // 扩展自定义配置，不会覆盖tailwindcss原有样式
    extend: {
      flex: {
        2: '2 2 0%',
        3: '3 3 0%',
        4: '4 4 0%',
        5: '5 5 0%',
        8: '8 8 0%',
      },
      fontSize: {
        fs12: '12px',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

demo

<template>
  <h1 class="text-center text-9xl text-blue-600 sm:bg-black sm:text-white">
    tailwindcss
  </h1>
</template>

/* 可以使用@apply指令将所用到的功能类整合成一个自定义的类 */
<template>
  <h1 class="intro">tailwindcss</h1>
</template>

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

.intro {
  @apply text-9xl text-center text-blue-600 sm:bg-black sm:text-white;
}

PostCSS 7 兼容性版本

# 从 v2.0 版本开始，Tailwind CSS 依赖于 PostCSS 8。由于 PostCSS 8 才使用了几个月，因此生态系统中的许多其他工具尚未更新，这意味着在安装 Tailwind，并尝试编译 CSS 时，您可能会在终端中看到这样的错误：

$ Error: PostCSS plugin tailwindcss requires PostCSS 8.

# 如果遇到上述错误，请卸载 Tailwind 并使用兼容性版本重新安装：

$ npm uninstall tailwindcss postcss autoprefixer
$ npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9