Tailwind.css的使用----基于nuxt.js

安装Tailwind

在终端项目文件夹下使用npm或yarn安装

npm install tailwindcss --save-dev
# or
yarn add -D tailwindcss

创建Tailwind配置文件（不是必须的）

在终端使用npx生成

npx tailwind init

成功后可以在项目根目录内看到tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}

引入tailwind

在assets/css内创建tailwind.css文件，并引入

@tailwind base;

@tailwind components;

@tailwind utilities;

在nuxt.config.js内配置postcss

首先我们要在nuxt.config.js内引入path模块

const path = require('path');

然后配置postcss

// 引入我们刚刚创建的tailwind.css
css: [
    '~assets/css/tailwind.css', 
],
// 配置postcss
build: {
    postcss: {
      plugins: {
        tailwindcss: path.resolve(__dirname, './tailwind.config.js')
      }
    }
}

使用

<div class="bg-purple text-white sm:bg-green md:bg-blue md:text-yellow lg:bg-red xl:bg-orange">
  Test
</div>

参考资料

• How to use Tailwind CSS 1.0.1 in Nuxt
• Tailwindcss.com