forsartis / vue-cli-plugin-tailwind Goto Github PK

I installed vue-cli-plugin-tailwind from the Vue CLI UI. When I serve the application using the Vue CLI, then the CSS that appears in my browser still holds the @tailwind rules, and no styling is applied. When I create a production build, and I serve this directory using npm run serve, then I can load the site with styling correctly applied.

This is unrelated to this plugin and a problem with Vetur, but do you know of any solution to allow @Directives to not be flagged by the syntax highlight?

Thanks!

Hello, thanks for creating the plugin, works great.

Is it possible for us users to upgrade the Tailwind version ourselves or do you have to bump the plugin to achieve that?

Current tailwindcss is 1.6.0, plugin is 1.4.5.

#16 is pending for a bit now.

As mentioned in title the plugin does not generate tailwind.config.js despite choosing minimal or full option.
I added the plugin to a fresh project generated by vue-cli 3 with default options.

Hello, Thanks for the plugin! It save me a lot of time. But I realized the purgecss will affect framework outside tailwind, like "vuetify".

Can I use the purge setting directly in the tailwind.config.js, do something like this?

// tailwind.config.js
 module.exports = {
//  purge: [],
  purge: [
   './public/**/*.html',
   './src/**/*.vue',
  ],
   theme: {
     extend: {},
   },
   variants: {},
   plugins: [],
 };

Hi, just wondering if anyone has been able to use this plugin within a @vue/cli preset for automatic project creation?
Is this supported or do I need to always add it manually once the project is created? (would be nice to do it automatically)

ie. whenever I try to use a vue-cli preset to create a new project, it fails whenever I include this plugin.

If you remove the plugin from the preset, create a new preset defined project, then manually add vue add tailwind it works as expected.

PS: If I set "replaceConfig" to false, the tailwind.config.js file is not generated.

To Reproduce
Add (or create a new) present in the ~/.vuerc and then create a new project
(ps: I trimmed the paths below)

❯ vue create -p Vue3_ALL_Plus2 test5                                                                                                                                                                          

Vue CLI v4.5.11
✨  Creating project in _______/test5.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.10
info No lockfile found.
[1/4] 🔍  Resolving packages...

success Saved lockfile.
✨  Done in 29.57s.
🚀  Invoking generators...
 ERROR  Error: Error: ENOENT: no such file or directory, unlink '_______/electron/test5/tailwind.config.js'
Error: Error: ENOENT: no such file or directory, unlink '_______/electron/test5/tailwind.config.js'
    at module.exports (_______/electron/test5/node_modules/vue-cli-plugin-tailwind/generator/index.js:86:13)
    at Generator.initPlugins (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:150:13)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at async Generator.generate (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:168:5)
    at async Creator.create (/usr/local/lib/node_modules/@vue/cli/lib/Creator.js:229:5)
    at async create (/usr/local/lib/node_modules/@vue/cli/lib/create.js:72:3)

It appears to try to unlink a non-existant file, might need to check if is exists first before trying to unlink?
ie. in file vue-cli-plugin-tailwind/generator/index.js maybe try replacing:

fs.unlinkSync(configPath);

with

if(fs.existsSync(configPath)) {
    fs.unlinkSync(configPath);
}

~/.vuerc

{
  "useTaobaoRegistry": false,
  "packageManager": "yarn",
  "latestVersion": "4.5.11",
  "presets": {
    "Vue3_ALL_Plus2": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-typescript": {
          "classComponent": true,
          "useTsWithBabel": true
        },
        "@vue/cli-plugin-router": {
          "historyMode": false
        },
        "@vue/cli-plugin-vuex": {},
        "@vue/cli-plugin-eslint": {
          "config": "base",
          "lintOn": []
        },
        "@vue/cli-plugin-unit-mocha": {},
        "@vue/cli-plugin-e2e-cypress": {},
        "vue-cli-plugin-moment": {
          "locales": "en"
        },
        "vue-cli-plugin-fontawesome": {},
        "vue-cli-plugin-tailwind": {
          "initConfig": "minimal",
          "replaceConfig": true
        }
      },
      "vueVersion": "3",
      "cssPreprocessor": "dart-sass"
    }
  }
}

Many thanks in advance.

Looks like there are some problems?

look this repo: REPO
I'm using a ui framework to work with tailwindcss, everything is working properly under yarn run serve, part of the css file will be lost after yarn run build

Hi, not sure if this is an issue with this plugin or something else but figured I'd ask here.

Using vue-cli for a little app. The app brings in vue components from another vue-cli app:
Footer: () => import('my-components/src/components/FooterV2.vue')

Running vue-cli-service serve, the app shows all the necessary CSS. But using vue-cli-service build, the CSS from the imported component is missing.

Code for tailwind.config.js:

module.exports = {
purge: [
        './src/**/*.{vue,js}',
        './node_modules/my-components/src/**/*.{vue,js}'
    ],
presets: [
    require('my-components/tailwind.config.js')
],
theme: {
    extend: {
        colors: {
            'secondary-dark': '#168b64',
        }
    }
}
}

and postcss.config.js

module.exports = {
    plugins: [
      require('tailwindcss'),
      require('vue-cli-plugin-tailwind/purgecss'),
      require('autoprefixer'),
    ]
}

If I remove require('vue-cli-plugin-tailwind/purgecss'), from postcss.config.js then the CSS does work but the CSS is then a crazy file size. So it does seem to be something to do with the purging.

I've also tried this as the purge section of the config but there is no difference in results

purge: {
    content: [
        './src/**/*.{vue,js}',
        './node_modules/my-components/src/**/*.{vue,js}'
    ]
},

Looks like something is ignoring my purge rules. Any ideas? Thanks

edit- versions:
node - tried both 12 and 16
"vue-cli-plugin-tailwind": "~1.2.0" (same as imported components)

hello, like the atitle says, i use vue 2, running
vue add tailwind
installd the tailwind 2.2.17 version.
any hint to install the 3.xx version?

After installing this plug-in, an auto-import was missing, import './tailwind.css'; should be injected into main.ts to let tailwindcss work.

It's my package.json:

"dependencies": {
    "@heroicons/vue": "^1.0.5",
    "autoprefixer": "^10.4.0",
    "core-js": "^3.20.0",
    "postcss": "^8.4.5",
    "register-service-worker": "^1.7.2",
    "tailwindcss": "^3.0.7",
    "vue": "^3.2.26",
    "vue-class-component": "^8.0.0-rc.1",
    "vue-router": "^4.0.12",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@types/chai": "^4.3.0",
    "@types/mocha": "^9.0.0",
    "@typescript-eslint/eslint-plugin": "^5.8.0",
    "@typescript-eslint/parser": "^5.8.0",
    "@vue/cli-plugin-babel": "^5.0.0-rc.1",
    "@vue/cli-plugin-eslint": "^5.0.0-rc.1",
    "@vue/cli-plugin-pwa": "^5.0.0-rc.1",
    "@vue/cli-plugin-router": "^5.0.0-rc.1",
    "@vue/cli-plugin-typescript": "^5.0.0-rc.1",
    "@vue/cli-plugin-unit-mocha": "^5.0.0-rc.1",
    "@vue/cli-plugin-vuex": "^5.0.0-rc.1",
    "@vue/cli-service": "^5.0.0-rc.1",
    "@vue/eslint-config-airbnb": "^6.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "@vue/test-utils": "^2.0.0-rc.18",
    "chai": "^4.3.4",
    "eslint": "^8.5.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-vue": "^8.2.0",
    "eslint-plugin-vuejs-accessibility": "^1.1.0",
    "typescript": "^4.5.4",
    "vue-cli-plugin-tailwind": "^3.0.0-beta.0"
  }

Tailwind 2 has been released. Would be nice to be able to use it with this plugin as well 👍

Hey I'm new to vue, so I apologize if these don't really go here.

problem 1

I am using vue3 beta and I ran vue add tailwindcss and I get these build errors:

🚀  Invoking generator for vue-cli-plugin-tailwindcss...
⠋  Running completion hooks...error: Unexpected require() (global-require) at tailwind.config.js:898:5:
  896 |
  897 |   plugins: [
> 898 |     require('tailwindcss/plugins/container')({
      |     ^
  899 |       // center: true,
  900 |       // padding: '1rem',
  901 |     }),


error: 'tailwindcss' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies) at tailwind.config.js:898:13:
  896 |
  897 |   plugins: [
> 898 |     require('tailwindcss/plugins/container')({
      |             ^
  899 |       // center: true,
  900 |       // padding: '1rem',
  901 |     }),


2 errors found.

problem 2

It doesnt seem like its actually purging. It says in the readme it adds purgecss but this is the config file after running it:

module.exports = {
  plugins: {
    tailwindcss: './tailwind.config.js',
    autoprefixer: {},
  },
};

I also dont see purgecss used anywhere? When I run NODE_ENV=production yarn build the css file is 250KB with lots of utility classes in it that I don't use (my app is literally blank, so it should be a very small file)

Thanks!

Reproduction:

Install latest version of Vue CLI (https://github.com/vuejs/vue-cli/releases)

vue create my-app
<pick settings>

npm run build <- Builds OK
vue add tailwind
<pick minimal>

npm run build
⠙  Building for production...

 ERROR  Failed to compile with 1 error                                                                          12:46:33

 error  in css/app.642f50fd.css

css/app.642f50fd.css from Css Minimizer plugin
Error: PostCSS plugin postcss-discard-comments requires PostCSS 8.

How do we fix this? Following this guide does not resolve the error: https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

Getting an error that PostCSS plugin tailwindcss requires PostCSS 8. The current package.json lists ^7 for PostCSS. Should this be updated?

This plugin creates a tailwind.css file which imports base, but the documentation imports preflight.

https://tailwindcss.com/docs/installation/
https://github.com/tailwindcss/tailwindcss/blob/master/tailwind.css

After added tailwindcss, webpack hot module reload stops working.

Thanks for the amazing plugin for tailwind CSS and I love it very much.

Meanwhile, when will the 3.0 release version be? it's been a while since the launch of the pre-release v3.0.0-beta.0, is it stable for production for using this beta version?

Thanks.

In my package.json, I'm trying to prevent postcss from auto-removing a bunch of vendor css.

  "postcss": {
    "plugins": {
      "tailwindcss": {},
      "vue-cli-plugin-tailwind/purgecss": {
        "whitelistPatterns": ["/^ais-/"]
      },
      "autoprefixer": {}
    }
  },

This doesn't work as I get an npm error when I run npm run build (v.test is not a function).

If I try this:

  "postcss": {
    "plugins": {
      "tailwindcss": {},
      "vue-cli-plugin-tailwind/purgecss": {
        "whitelistPatterns": [/^ais-/]
      },
      "autoprefixer": {}
    }
  },

then npm throws an error saying its not valid json.

I'm kinda stuck on what to try next.

It looks like at least some of official Tailwind plugins break tailwind when using this plugin.
Steps to reproduce:

1. Create project with Vue CLI, select Vue 3 preset
2. vue add tailwind
3. npm install @tailwindcss/typography
4. npm run serve

Note: even after removing the plugin, tailwind is still broke:
6. npm uninstall @tailwindcss/typography' 7. npm run serve`
8.

When adding the plugin through vue-cli, when it finishes it'll throw errors:

As mentioned in the title, generating the tailwind.config.js (full and minimal) does not work under macOS (Big Sur).
Made a fresh vue project and tried to install tailwind via vue add tailwind.

If I create a tailwind.config.js file first, it asks me to replace it. If I agree, it deletes the current tailwind.config.js, but afterwards I get the same error.

Getting the following error on the clean install of vue-cli and minimal tailwind config:

warn - Tailwind is not purging unused styles because no template paths have been provided.
warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately not removing unused styles, set `purge: false` in your Tailwind config file to silence this warning.
warn - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css

Hello,
after I select with type of tailwind config file I want (minimal)
i get this error:

Invoking generator for vue-cli-plugin-tailwind.
ERROR Error: did not recognize object of type "ImportExpression"
Error: did not recognize object of type "ImportExpression"

What should I do?

After running vue add tailwind, the generated postcss.config.js does not cointain an entry for Autporefixer, like stated on the Readme.

Its contents are as follows:

module.exports = {
  plugins: {
    tailwindcss: {},
    'vue-cli-plugin-tailwind/purgecss': {}
  }
}

Hi.
Thought I'd ask if there are plans to support Tailwind v3?
Thanks
Tom

Do you have any short term plans for updating this package to match changes in Tailwind 1.0

 ERROR  Failed to compile with 1 error                                                                                                                            20:44:08

 error  in ./src/assets/tailwind.css

Syntax Error: Error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'

Every couple of weeks I've been trying to upgrade to the latest version of the plugin but I get this error everytime.

I ran the following:

npm update
vue upgrade

  Name                       Installed       Wanted          Latest          Command to upgrade
  vue-cli-plugin-tailwind    1.4.2           1.4.2           2.0.5           vue upgrade vue-cli-plugin-tailwind

Previously it wasn't required to install Tailwind separately, is this now a requirement? If it is could it be added to the docs?

Furthermore, this is the current contents of postcss.config.js:

module.exports = {
    plugins: {
        tailwindcss: {},
        'vue-cli-plugin-tailwind/purgecss': {},
        autoprefixer: {},
    },
};

Does anything in here need to change in order to upgrade too? Really struggling to understand how to upgrade.

I was using the version 2.0.1 at which point it was working flawlessly.

Running an update when I get bumped to 2.0.2 I recieve the following error on vue-cli-serve:
Error: PostCSS received undefined instead of CSS string

I tried every version between 2.0.1 and 2.0.5 (currently the latest)

At 2.0.4 the error has changed to
Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'

The changes to the plugin inbetween those versions can be found here:
https://github.com/forsartis/vue-cli-plugin-tailwind/commits/master/package.json

My project is a standard vue 3 project bootstrapped by vue cli with no customisation eg.:
postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {}
    }
};

Not sure if I have a special circumstance, however, when running a "vue create" (version 5 cli) project with a "vue 3" preset and "vue add tailwind", my build fails at the build script.

Error: PostCSS plugin postcss-discard-comments requires PostCSS 8.

Anyone can explain or have also run into this problem?

(PS. I'm still relatively new)

This is the error that I get when calling vue add tailwindcss in a Typescript configured vue-cli project:

�🚀  Invoking generator for vue-cli-plugin-tailwindcss...
-  Running completion hooks... ERROR  Error: ENOENT: no such file or directory, open 'C:\Users\Khaly\translate-it\src\main.js'
Error: ENOENT: no such file or directory, open 'C:\Users\Khaly\translate-it\src\main.js'
    at Object.openSync (fs.js:440:3)
    at Object.readFileSync (fs.js:342:35)
    at C:\Users\Khaly\translate-it\node_modules\vue-cli-plugin-tailwindcss\generator\index.js:30:30
    at runGenerator (C:\Users\Khaly\AppData\Local\Yarn\Data\global\node_modules\@vue\cli\lib\invoke.js:132:13)
    at processTicksAndRejections (internal/process/task_queues.js:94:5)
    at async invoke (C:\Users\Khaly\AppData\Local\Yarn\Data\global\node_modules\@vue\cli\lib\invoke.js:92:3)

I do not have an src/main.js but a src/main.ts file.

I'm using Element UI and Tailwind, both installed vie Vue-cli plugins.
However it seems the included purge-css plugin included is being applied to the global css and not only to Tailwind, stripping all the Element UI classes.

The postcss config in package.json looks like this:

  "postcss": {
    "plugins": {
      "vue-cli-plugin-tailwind/purgecss": {},
      "tailwindcss": "./tailwind.config.js",
      "autoprefixer": {}
    }

Thanks!

I install vue-cli-plugin-tailwind with a minimal config, when I run yarn serve to use vue-cli-service serve, new tailwind classes that I add to my code don't compile after vue-cli-service serve update my served project.

For example, in the below picture, you see I have text-white, but the button text color doesn't change to white

If I kill the server and run yarn serve again, button text changes to white

Whenever adding a new "rule" to the config it won't be applyed, and is so on not usable. whether as a class name nor in @apply.

this is my tailwind.config.js :

module.exports = {
  purge: [],
  theme: {
    fontFamily: {
      display: ["Roboto", "sans-serif"],
      body: ["Roboto", "sans-serif"]
    },
    colors: {
      primary: "#9cdbff"
    },
    extends: {
      margin: {
        p49: "49%",
        p32: "32%"
      }
    }
  },
  variants: {},
  plugins: []
};

my postcss.config.js :

const autoprefixer = require("autoprefixer");
const tailwindcss = require("tailwindcss");
const postcssPurgecss = require(`@fullhuman/postcss-purgecss`);

const purgecss = postcssPurgecss({
  // Specify the paths to all of the template files in your project.
  content: ["./public/**/*.html", "./src/**/*.vue"],
  // Include any special characters you're using in this regular expression.
  // See: https://tailwindcss.com/docs/controlling-file-size/#understanding-the-regex
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
  // Whitelist auto generated classes for transitions and router links.
  // From: https://github.com/ky-is/vue-cli-plugin-tailwind
  whitelistPatterns: [
    /-(leave|enter|appear)(|-(to|from|active))$/,
    /^(?!(|.*?:)cursor-move).+-move$/,
    /^router-link(|-exact)-active$/
  ]
});

module.exports = {
  plugins: {
    tailwindcss,
    autoprefixer,
    ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
  }
};

If I try to use a custom class in @apply e.g. my primary color it results in this error:

`@apply` cannot be used with `.bg-primary` because `.bg-primary` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.bg-primary` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.`

primary is shown by vs-code where i added stylelint so it seems that it detects but doesn't apply properly.

After updating to tailwind v3 a global, custom utility class cannot be used in @apply in a component anymore.

Reproduce:

• vue create test
• Add a custom utility in src/assets/tailwind.css: @layer utilities { .bg-test { background-color: red } }
• Use in HelloWorld.vue style part with @apply bg-test

You will see the following error:

(14:10) /home/bodo/tmp/test/src/components/HelloWorld.vue The `bg-test` class does not exist, but `bg-left` does. If you're sure that `bg-test` exists, make sure that any `@import` statement
s are being properly processed before Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.                                                              
                                                                                                                                                                                              
  12 | }                                                                                       
  13 | a {                                                                                                                                                                                    
> 14 |   @apply bg-test;                                                                                                                                                                      
     |          ^                                                                                                                                                                             
  15 | }                             
  16 |

Hi! I'm having the same problem described on issue #26 , same error, I have updated the Vue CLI to verion 4.9.6 but it dit not fix the error. I'm running vue add tailwind on a freshly created project using the vue ui tool.

The preflight style rule of

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

is overriding any style rules that I put in a (non-scoped) parent component—the effect is that I'm unable to affect the font size or weight of a header tag with a style rule in any component except for the component itself where the tag itself occurs.

Looking at the output source, I wonder if this is happening because the tailwind preflight rules are imported after everything except the rules for the component itself?