No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Integrating Tailwind into Quasar

    Help
    8
    10
    5735
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      moshemo last edited by

      I am new to quasar and so far I really like it. With that said, I would like to integrate tailwindcss with it if possible so that I can use it’s utility classes when I want.

      Does anyone know how to do this – or can they point to any documentation that can explain how to integrate the two together?

      Thanks.

      1 Reply Last reply Reply Quote 2
      • Hawkeye64
        Hawkeye64 last edited by

        @moshemo Don’t know much about Tailwind. What kind of utility classes do you want to use?

        1 Reply Last reply Reply Quote 0
        • M
          matzeso last edited by

          Hey @moshemo ,

          I had the same questions and after digging a bit through the extensions I just finished a first version of a Quasar extension that includes TailwindCSS into your project.

          For details check https://github.com/matzeso/quasar-app-extension-tailwindcss

          To use it, simply run:
          quasar ext add tailwindcss

          1 Reply Last reply Reply Quote 2
          • T
            Tom De Smet last edited by

            I’m new to Quasar too but just installed TailwindCSS as usual, added the tailwind classes to the app.css as described in the Tailwind docs and added it to the postcss config and it works out of the box as I would expect.

            I even (mind, I’m using Quasar with the Quasar CLI) was able to connect the color config of Tailwind with the brand color config of Quasar by extracting them into a separate Javascript file. In that brand config file I have a module.export with the brand object which I import into TailwindCSS config as the color object and also in the Quasar config as the framework config brand object.
            So I don’t use the config SASS file of Quasar for the brand colors but I put them right into the config javascript file. An example of that can be found when you export the colors via the Quasar Theme Builder in the docs.

            1 Reply Last reply Reply Quote 3
            • T
              tanvir last edited by

              It’s already in documentation
              https://tailwindcss.com/docs/installation/

              1 Reply Last reply Reply Quote -1
              • L
                lmajano last edited by

                @Tom-De-Smet that’s great, do you mind sharing your setup.

                1 Reply Last reply Reply Quote 0
                • T
                  Tom De Smet last edited by Tom De Smet

                  It’s very simple actually:

                  Create a JS file somewhere (I created a brand.config.js file in my root where Tailwinds config also resides) with a color object which you will export (use the Quasar naming such as primary:

                  const brand = {
                      primary  : '#ffbb00',
                      secondary: '#ffffff',
                      accent   : '#242424',
                      dark     : '#696969',
                      positive : '#60e67f',
                      negative : '#db394c',
                      info     : '#e3e3e3',
                      warning  : '#f2a838'
                  };
                  
                  module.exports = brand;
                  

                  Than import this into Tailwind config and Quasar config files:

                  const brand = require('./brand.config.js');

                  Than use them in your Tailwind config

                  theme: {
                          extend: {
                              colors: brand
                      }
                  }
                  

                  and Quasar config:

                  framework: {
                      config: {
                          brand: brand
                      }
                  }
                  

                  You can also use the spread operator if you want to add additional colors:

                  theme: {
                          extend: {
                              colors: {
                                  ...brand,
                                  'extra-color': '#555555'
                          }
                      }
                  }
                  
                  1 Reply Last reply Reply Quote 1
                  • S
                    Sergio C. last edited by Sergio C.

                    @Tom-De-Smet unfortunately, installing TailwindCSS as usual isn’t enough, as Quasar utility classes conflict with those of Tailwind. There’s an open issue about this.

                    Quasar prioritizes its own CSS at build time, so eventually, your tailwind-styled markup won’t behave properly.

                    There are ways to disable Quasar CSS, in which case Tailwind will work perfectly. But making both work at the same time is tricky. I personally would be interested in a method to do that.

                    1 Reply Last reply Reply Quote 0
                    • S
                      Sergio C. last edited by

                      I am using the following workaround until an official solution comes up: Use the postcss-remove-declaration plugin to remove the conflicting class declarations for Quasar before importing to allow tailwind to replace those classes.

                      Install the PostCSS plugin:

                      yarn add postcss-remove-declaration --dev
                      

                      Then add the plugin before the Tailwind import in postcssrc.js:

                      // postcssrc.js
                      
                      // ...
                      
                      // These are the conflicting classes between Quasar and Tailwind. They may change in the future.
                      const conflictingClasses = [
                        "flex", "order-first", "order-last", "cursor-not-alowed",
                        "cursor-pointer", "block", "inline-block", "text-justify",
                        "hidden", "invisible", "overflow-auto", "overflow-hidden"
                      ];
                      // The plugin takes an object where the keys are the selectors and the values are the properties (or list of properties) to remove or all properties with "*".
                      const removeObj = {
                        ...Object.fromEntries(conflictingClasses.map(cc => [`.${cc}`, "*"])), // Removes all properties from conflicting classes
                        body: ["font-family", "font-size"] // You can also remove things like fonts and colors.
                      };
                      
                      module.exports = {
                        plugins: [
                          ...
                          require("postcss-remove-declaration")({ remove: removeObj }), // The plugin must be placed before Tailwind import!
                          require("tailwindcss"),
                          require("autoprefixer"),
                          ...
                        ]
                      };
                      
                      // ...
                      

                      That’s it! This should remove conflicts in favor of Tailwind and you should still be able to use Quasar as usual. (Be aware that the modifications may modify the looks and behaviour of Quasar, although I haven’t noticed any major change until now.)

                      1 Reply Last reply Reply Quote 0
                      • W
                        wpq last edited by

                        I believe that the problem may have been fixed by now, but just in case: there is a way to prefix all Tailwind classes (https://tailwindcss.com/docs/configuration#prefix). This removes the conflict without any hacking.

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post