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
    1. Home
    2. Tom De Smet
    3. Best
    T
    • Profile
    • Following 0
    • Followers 0
    • Topics 2
    • Posts 6
    • Best 2
    • Groups 0

    Best posts made by Tom De Smet

    • RE: Integrating Tailwind into Quasar

      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.

      posted in Help
      T
      Tom De Smet
    • RE: Integrating Tailwind into Quasar

      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'
              }
          }
      }
      
      posted in Help
      T
      Tom De Smet