QuasarJS: TailwindCSS v3

#1. Add TailwindCSS to the project.

yarn add -D tailwindcss

#2. Initialize TailwindCSS this will generate tailwind.config.js.

yarn tailwindcss init

#3. Add to postcss.config.js.

module.exports = {
  plugins: [

    require('tailwindcss'),

    // https://github.com/postcss/autoprefixer
    require('autoprefixer')({
      overrideBrowserslist: [
        'last 4 Chrome versions',
        ...,
      ]
    })

#4. Add to src/css/app.scss.

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

#5. Add content required to tailwind.config.js.

module.exports = {
  prefix: 'tw-',
  content: ['./src/**/*.vue'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *