Tailwind CSS 基本配置

一、前言

最近的一个项目使用了新的框架，这个框架中使用了 Tailwind CSS。对这个 CSS 的框架不是很熟悉，所以在使用过程中会遇到一些问题。

对于这些问题记录下。

本文章主要介绍 Tailwind CSS 的安装、基本配置等。

二、安装

1、安装包

根据自己使用习惯是使用 npm 还是 yarn

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

2、引入包

Tailwind css 分了几个基本的模块，可以按需引入自己需要的基础模块。

基本的导入，使用 Tailwind 指令

@tailwind base;

@tailwind components;

@tailwind utilities;

在一些项目中使用了 postcss-import 那么导入的方式是用 import

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

提示：在上面这些模块中，base 模块一般不会导入，因为有些基本的样式我们是用不到的，例如 button 的 outline。

3、创建 tailwind.config.js 配置文件

这个是直接使用命令创建（在项目根目录下）

npx tailwindcss init

执行完成后会生成一个配置文件，默认是空的。

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

4、用 tailwind 处理 css

项目中使用的 webpack，所以是在 webpack 中的 postcss-loader 中配置。

Vue CLI2.x 中这样配置：

module.exports = {
  // ...
  module: {
    rules: [
      {
        // ...
        use: [
          // ...
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
              ],
            },
          },
        ],
      }
    ],
  }
}

Vue CLI3.x 中这样配置：

module.exports = {
// css 配置
  css:{
    loaderOptions:{
      postcss:{
        plugins:[require('tailwindcss'),require('autoprefixer')]
      }
    }
  },
}

提示：对于其他环境下的配置可以参考官方文档：Tailwind 安装

三、关于配置

在 tailwind.config.js 配置文件中可以根据实际情况自己定义。

1.颜色配置问题

在实际项目中遇到的问题是这样的：使用 text-pink-700 这样的样式不生效。

查看配置文件是这样的：

theme: {
    colors: {
      'transparent': 'transparent',
      'black': '#22292f',
      'white': '#ffffff',
      'grey': '#9897a9',
      'grey-light': '#dae1e7',
      'red': '#EB5757'
    }
}

颜色自定义了几种颜色，没有 pink-700 对应的颜色，所以不生效。

正常来说一个项目中用到的颜色不会很多，使用什么颜色配置就好。

上面的配置中添加：'pink-700':'#b83280' 后就可以正常使用。

    colors: {
      'transparent': 'transparent',
      'black': '#22292f',
      'white': '#ffffff',
      'grey': '#9897a9',
      'grey-light': '#dae1e7',
      'red': '#EB5757',
      'pink-700':'#b83280'
    },