matzeso / quasar-app-extension-tailwindcss

This extension includes TailwindCSS into the Quasar Framework

TailwindCSS

This extension makes it easy to integrate TailwindCSS (https://tailwindcss.com/) into Quasar (https://quasar.dev).

Install

This extension now uses TailwindCSS v2.

quasar ext add tailwindcss

We currently use tailwindcss@^2.0.1-compat. While TailwindCSS v2 requires postcss@^8.1.0, Quasar still uses v7. We therefore make use of their compatibility version that has the same features as the regular v2, but uses PostCSS v7 instead. As soon as Quasar ships with PostCSS 8, we will switch over to regular TailwindCSS v2.

There have been reports that some part of TailwindCSS v2 breaks with current Quasar rules. In case you encounter difficulties with TailwindCSS v2, you can use v1 by installing the extension like this:

quasar ext add tailwindcss@^1.0.0

Quasar CLI will retrieve it from NPM and install the extension.

Prompts

• prefix string - adds a class prefix to every tailwind class name
• parts list - decide which parts of tailwind you want to install (base, components, utilities)

Uninstall

quasar ext remove tailwindcss

Removes the extension, optionally also the folder /src/extensions/tailwindcss to fully delete all files that were created with this plugin.

Features

• Working tailwindcss installation and usage
• PurgeCSS for production builds

You can configure the tailwind.css and tailwind.config.js file in the src/extensions/tailwindcss/ folder after installation. See https://tailwindcss.com/docs/installation/#2-add-tailwind-to-your-css and https://tailwindcss.com/docs/configuration/

Contributions

Feel free to send PRs along, or even join as a contributor.

quasar-app-extension-tailwindcss's Issues

Invalid options object. PostCSS

didn't manage to make it work with everything default with the latest quasar. Using yarn
I don't really know what config I can also upload, tell me

Option to disable postcss-purgecss

Is there a way to disable purgecss?

We are using dynamic classnames in our components and they are not picked up by purgecss.

I couldn't find any way to disable purgecss though.

Add @quasar/app v3 support

Hello!

I've tested this app using @quasar/app version 3 and it's functional, but this extension doesn't support a production build right now because compatibility is only for version 3 beta. Could this be updated?

Upgrade to Tailwindcss 2.1

is there a way to upgrade to the latest tailwindcss?

Error: Cannot find module '@fullhuman/postcss-purgecss'

After installing the extension, I run $ quasar dev and I get:

` app:extension Running "tailwindcss" Quasar App Extension... +6ms
(node:80905) UnhandledPromiseRejectionWarning: Error: Cannot find module '@fullhuman/postcss-purgecss'

• loader.js:581 Function.Module._resolveFilename
  internal/modules/cjs/loader.js:581:15

• loader.js:507 Function.Module._load
  internal/modules/cjs/loader.js:507:25

• loader.js:637 Module.require
  internal/modules/cjs/loader.js:637:17

• helpers.js:20 require
  internal/modules/cjs/helpers.js:20:18

• index.js:17 module.exports
  [ui]/[quasar-app-extension-tailwindcss]/src/index.js:17:22

• Extension.js:225 Extension.run
  [ui]/[@quasar]/app/lib/app-extension/Extension.js:225:11

• extensions-runner.js:16 ExtensionsRunner.registerExtensions
  [ui]/[@quasar]/app/lib/app-extension/extensions-runner.js:16:31

• next_tick.js:68 process._tickCallback
  internal/process/next_tick.js:68:7

• loader.js:745 Function.Module.runMain
  internal/modules/cjs/loader.js:745:11

• node.js:266 startup
  internal/bootstrap/node.js:266:19

(node:80905) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:80905) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
`

Hope you can help... it was a working and fairly clean app before.

Not starting((

Extension(tailwindcss): is not compatible with @quasar/app v2.0.9. Required version: ^1.0.0

Tailwind UI

it would be great if Quasar components could take the TailwindUI styles and use those over default Quasar Material UI Style, or even overwrite the Quasar css...
or prevent its compiling?

Great package!

How can I use @apply or @extend in <style> tags?

Right now, I have to do this for it to work.

<style lang="scss" scoped>
@import "tailwindcss";

.myStyle {
  @extend .bg-gradient-to-r, .from-red-500;
}
</style>

I'm not sure if it's the right way of doing it or if it is getting treeshaked with PurgeCSS.

Here's how my config looks like:

// tailwind.config.js

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {}
    },
    
    prefix:  'tw-',
    
    variants: {},
    plugins: []
};

// quasar.extensions.json

{
  "tailwindcss": {
    "prefix": "tw-",
    "parts": [
      "components",
      "utilities"
    ]
  }
}

// .postcssrc.js

module.exports = {
  plugins: [
    require('autoprefixer'),
  ]
}

How do we upgrade to Tailwind 2.0?

Doing a straight install as per the Tailwind upgrade docs doesn't work. I'm getting postcss error: PostCSS plugin autoprefixer requires PostCSS 8. but I've installed "postcss": "^8.1.8",

How to use DaisyUI with this extension?

Hi, is there way to use DaisyUI with this extension?

Tailwind dark mode

There is an way to work with Dark Mode?

I'm trying to apply the class: tw-bg-gray-200 dark:tw-bg-gray-900, but only dark mode works, and not switch back to light mode.

I'm using Dark Plugin of Quasar, and i'm setting through $q.dark.set(true).