How to Install Tailwind CSS on Quasar Framework

Quasar is a powerful Vue-based framework that provides a rich set of components to streamline development. While it does not have official support for Tailwind CSS, it can still be integrated seamlessly. Since Quasar projects are essentially Vue projects under the hood, installing Tailwind CSS follows the same process as a typical Vue setup.

Note: At the time of writing, Tailwind CSS version 4 is not supported in Quasar.

Prerequisites

Before installing Tailwind CSS, ensure that you have the necessary tools installed:

1. Node.js (Recommended version: LTS)

   • Download and install from nodejs.org.
   • Or you can use Node Version Manager (NVM) to install and manage Node.js versions.
     • Windows

2. Quasar CLI

   • Install globally using npm or pnpm or yarn:

   npm install -g @quasar/cli
   

   or
   

   pnpm add -g @quasar/cli
   

   or
   

   yarn global add @quasar/cli
   

Creating a Quasar Project

Once the prerequisites are installed, create a new Quasar project using the following command:

quasar create my-quasar-app

Follow the prompts to configure your project.

After the project is created, navigate into the project directory:

cd my-quasar-app

To start the development server, run:

quasar dev

Steps to Install Tailwind CSS in a Quasar Project

1. Install Tailwind CSS and Dependencies

You can use npm, yarn, or pnpm to install Tailwind CSS along with PostCSS and Autoprefixer.
As the Tailwind CSS version 4 is not supported, we will use Tailwind CSS version 3.4.17 as it is the latest supported version.

Using npm:

npm install --save-dev tailwindcss@3.4.17 postcss autoprefixer

Using yarn:

yarn add -D tailwindcss@3.4.17 postcss autoprefixer

Using pnpm:

pnpm add -D tailwindcss@3.4.17 postcss autoprefixer

2. Initialize Tailwind CSS

Run the following command to generate Tailwind's configuration files:

npx tailwindcss init -p

If you have corepack enabled, you can replace npx with yarn or pnpm.

This command creates two files:

• tailwind.config.js
• postcss.config.js

3. Configure postcss.config.js

Modify the postcss.config.js file to include Tailwind CSS and Autoprefixer:

import tailwindcss from 'tailwindcss';

module.exports = {
  plugins: {
    tailwindcss({}),
    autoprefixer({})
  }
}

In the latest Quasar versions, you may need to override the contents of the existing PostCSS files and move the overrideBrowsersList array to package.json under the key browserslist.

4. Configure tailwind.config.js

Modify tailwind.config.js to specify the content sources:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    'index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

5. Add a tailwind.css File

Create a src/css/tailwind.css file and add the following Tailwind directives:

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

Your editor may show warnings for these directives, but they can be ignored.

6. Include Tailwind in quasar.config.js

Modify the quasar.config.js file to include tailwind.css:

// ...
css: [
  'tailwind.css',
  'app.scss'
],
// ...

If you encounter issues with PostCSS, try renaming postcss.config.js to postcss.config.cjs.

Overriding Quasar Styles with Tailwind CSS

Since Quasar has its own set of styles, conflicts may arise when using Tailwind. Here are two approaches to ensure Tailwind styles take precedence:

1. Use !important to Force Tailwind Styles

If Quasar’s styles have higher specificity, you can enforce Tailwind classes using !important by updating tailwind.config.js:

module.exports = {
  corePlugins: {
    preflight: false, // Disable conflicting resets
  },
  important: true, // Adds !important to all Tailwind classes
}

This ensures Tailwind’s utility classes take priority over Quasar’s.

2. Use tw- Prefix for Tailwind Classes

To prevent conflicts, you can configure Tailwind to use a prefix:

module.exports = {
  prefix: 'tw-',
}

Then, use classes like tw-text-red-500 instead of text-red-500 to avoid Quasar interference.

Additional Tips

• Install the Tailwind CSS IntelliSense extension in VS Code to improve the development experience.
• Be aware that some Quasar CSS classes may conflict with Tailwind classes. In most cases, Quasar’s styles take precedence, but the conflicts are minimal.

Conclusion

Although Quasar does not officially support Tailwind CSS, following the above steps allows you to integrate it smoothly into your Quasar project. This setup provides flexibility while leveraging the strengths of both Tailwind and Quasar.

Happy coding!