nuxtjs2.x配置tailwindcss

背景

现在tailwindcss比较火，就想着在项目中配置一下，毕竟能节省好多自己写css的时间。tailwindcss中是有nuxt中配置tailwindcss的教程的，跟着做了一下，但是由于自己还是nuxt2.x，而官网教程是针对nuxt3和postcss8的，所以还是有问题的，所以网上找了一下教程，又重新配置了一下

参考地址: 超简单！怎样在Vue2中使用TailWind Css
tailwindcss官网配置教程: 在 Nuxt.js 中安装 Tailwind CSS

配置步骤

• 首先，我们执行以下下面的命令

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

• 然后生成tailwindcss配置文件

npx tailwindcss init

初始文件内容如下

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

• 创建tailwind.css文件，内容如下

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

• 在nuxt.config.js中配置如下

export default {
	css: ['~/assets/css/tailwind.css'], // 引入tailwind.css
	buildModules: ['@nuxtjs/tailwindcss'] // 引入tailwindcss插件
}

• 然后我们可以修改一下tailwind.config.js
• 注意根据实际情况配置

module.exports = {
  purge: [
    './components/**/*.{vue,js}',
    './submodules/**/*.{vue,js}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  darkMode: false, // or 'media' or 'class'
  prefix: '',
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
  important: true,
}