quasar2&vue3中开发引入tailwindcss

一.安装tailwindcss包

首先安装tailwindcss，这里选择最新版本，根据tailwindcss对应版本postcss和autoprefixer的依赖包对这两个包进行更新，这两个包在quasar脚手架中自带。

这里推荐用yarn

 yarn add tailwindcss

对应的版本：

tailwindcss:^3.2.6

postcss:^8.4.16

autoprefixer: "10.4.8"

 

二.在quasar中引入tailwindcss

在脚手架中找到css文件夹下的app.scss，在app.scss中引入tailwindcss必须的样式,所有全局样式都需要汇总到app.scss，quasar默认将其作为全局样式文件处理，可在quasar.config.js进行额外的文件配置。

app.scss中

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

quasar.config.js中 

  css: [
      'app.scss'
    ],

三.postcss配置文件中引入tailwindcss

/* eslint-disable */
// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  plugins: [
    // https://github.com/postcss/autoprefixer
    require('autoprefixer')({
      overrideBrowserslist: [
        'last 4 Chrome versions',
        'last 4 Firefox versions',
        'last 4 Edge versions',
        'last 4 Safari versions',
        'last 4 Android versions',
        'last 4 ChromeAndroid versions',
        'last 4 FirefoxAndroid versions',
        'last 4 iOS versions'
      ]
    }),
    require('tailwindcss')
    // https://github.com/elchininet/postcss-rtlcss
    // If you want to support RTL css, then
    // 1. yarn/npm install postcss-rtlcss
    // 2. optionally set quasar.config.js > framework > lang to an RTL language
    // 3. uncomment the following line:
    // require('postcss-rtlcss')
  ]
}

四.生成tailwindcss配置文件并配置

命令：npx tailwindcss init 

生成tailwindcss.config.js文件，并且进行如下配置

module.exports = {

content: [
    './index.html',
    './src/**/*.{vue, js, ts, jsx, tsx}',
    './components/**/*.{vue,js,ts,jsx,tsx}',
  ]

}

指定所有需要对tailwindcss样式进行生效的文件