Nuxt2.x 配置 Tailwindcss

背景

公司内某个使用 Nuxt2.x 搭建的服务端渲染项目需要实现 响应式; Tailwindcss文档中配置示例是Nuxt3；对于目前项目并不适用，经一番折腾后做此文进行记录~

安装配置

1、通过 npm 安装 Tailwind

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

上述install的npm包明显与官网介绍不同，原因在此

2、作为 PostCSS 插件来添加 Tailwind

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

3、创建tailwindcss配置文件

// 创建 tailwindcss.config.js
npx tailwindcss init

// 配置tailwind.config.js 内容
module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

4、配置nuxt.config.js

// nuxt.config.js中配置css属性
css: [
    {
        src: "tailwindcss/tailwind.css"
    },
    ...
];

5、验证是否配置成功

// 项目启动
npm run dev

// 测试代码
<template>
    <div class="container flex itmes-center justify-center">
        <button class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75">
            Click me
        </button>
    </div>
</template>

<script>export default {}</script>
<style lang="scss" scoped></style>

效果图