You are placing the directive in the wrong place: https://github.com/twocngdagz/vue-tailwind-select/blob/master/src/App.vue#L23

It should be inside <style> blocks.

To anyone having the same issue despite having placed the directives in the correct place: vue-cli 3 does not pick up on the .postcssrc.js or the postcss.config.js, since it uses the package.json to configure postCSS.

This article helped me solve the problem.

@Christoph-Harms I can't get it to work, following the article. Do you happen to have a working example?

If anyone else has this problem you might be interested in my solution to the problem.

The postcss.config.js was not loading at all (tried putting error code in there, but no failures/warnings). What was happening was that Webpack was never really loading the config file because I was not using any .postcss files in my project, only .scss files. I was expecting the postcss-loader to be used as part of the .scss rule in the Webpack-config, but it is not set up this way by default in Webpack 2 and 3.

The solution was then to add the postcss-loader to the .scss rule in the Webpack config files. As the loaders are generated by a function called generateLoaders in the utils.js file, I had to change some of that generating-code to make it work. After making the changes I made sure that when generating the scss loaders I added in the postcss-loader.

This is how my build/utils.js file looks like:
https://gist.github.com/adrian-fjellberg/5e2243cf6b99cf47b02051446dd16e6e

@adrian-fjellberg Postcss is supported out-of-the-box in vue-cli 3.

@Akryum Aha. Of course, it's not correct of me to say:

it is not set up this way by default in Webpack 2 and 3

What I should say is that my problem was related to back when vue-cli used a build directory to configure Webpack. I don't know when vue-cli stopped configuring Webpack that way and added postcss-loader to the .scss rule by default. Sorry for the confusion, I was up all night to get this to work on an older application and wanted to share my solution when I finally got it working.

I don't know when vue-cli stopped configuring Webpack that way and added postcss-loader to the .scss rule by default.

Since version 3.0

At the core, this has more to do with vue-loader than vue-cli. Since vue-loader 15, postcss is not applied automatically to all <style> tags anymore, since vue-loader now just uses the other webpack rules defined for *.css files, *.scss files etc.

Hi @LinusBorg, can you provide a small example to apply postcss to all style tags?

Oh your misunderstanding.

Vue-cli 3 is configured to apply postcss to all style tags. I was me rely stating that this is now done explicitly by adding postcss to the rule that is applied to the styles, not implicitly by vue-loader internally.

postcss-loader does not load any config file like postcss.config.js or .postcssrc when it's options has some useful fields like plugins.

I can't make postcss work with a vue-cli 3 generated project. I just followed the wizard and chosed to use separated configuration files. After configured the postcss.config.js file it should works. Intead postcss plugins aren't loaded inside my vue single file components using <style lang="postcss" scoped>

This issue is closed. Open a new one with a reproduction

To anyone having the same issue despite having placed the directives in the correct place: vue-cli 3 does not pick up on the .postcssrc.js or the postcss.config.js, since it uses the package.json to configure postCSS.

This article helped me solve the problem.

aw, why vue cli3 suggests using babel.config.js instead of package.json#babel to config babel.
Why not portcss? Gee... front-end sucks

#2985

Came here with the same issue in vue-cli 4.5.4, what worked for me was configuring the postcss-loader via vue.config.js.

Create vue.config.js in root directory (next to package.json) and fill it with:

const tailwindcss = require('tailwindcss'); 
const autoprefixer = require('autoprefixer');


module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    tailwindcss,
                    autoprefixer,
                ],
            },
        },
    },
}

Hope it helps somebody :-)

Despite trying various of the above answers and lots of googling (webpack configs, postcss configs, adding things to my package.json, vue configs), I still don't seem to be generating autoprefixed CSS from my <style lang="scss"> tags.

It's very confusing as to the correct place we need to tell Vue to use PostCSS and autoprefix sass tags in .vue files (which I assume is extremely common).

Have created a vue.config.js file like so (as suggested by @matzeso):

const autoprefixer = require('autoprefixer');

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    autoprefixer,
                ],
            },
        },
    },
}

Output .css doesn't seem to have any prefixes applied. No errors in console. I know the vue.config.js is being read because if I throw random code in there it will error during the build.

@jamiegdsn They don't care about bugs.

This is not the place to report bugs or expect answers, as this is a closed ticket @equinusocio
If you want to help a project move forward, help creating good tickets and stir people in the right direction.
Nobody is motivated or helped by just complaining.

@jamiegdsn I would advice you to create a new ticket, create a minimum reproduction of the issue on e.g. codesandbox and share it a link to that in your newly created ticket.

Good luck!

Isn't autoprefixer enabled by default already in vue cli 3?

So finnaly what are the ways to add a postCss module or 'postcss-preset-env' in vue?

1. package.json

"postcss": {
"plugins": {
"postcss-preset-env": {
"importFrom" : "['./src/assets/styles.css']"
}
}
},

2. vue.config.js
   css: {
   loaderOptions: {
   plugins: [
   [
   "postcss-preset-env", {}

   ],
   ],
   },
   },

i believe both of the above should work in a standard vue 2.x project, although the above still does not work for me, when i have a global style.css file imported in to main.js I sincerely wish the Vue Cookbook or docs would explain this better for newbs, infact most experienced devs still get confused around post css and vue.

Isn't autoprefixer enabled by default already in vue cli 3?

So finnaly what are the ways to add a postCss module or 'postcss-preset-env' in vue?

1. package.json

"postcss": { "plugins": { "postcss-preset-env": { "importFrom" : "['./src/assets/styles.css']" } } },

2. vue.config.js
   css: {
   loaderOptions: {
   plugins: [
   [
   "postcss-preset-env", {}
   ],
   ],
   },
   },

i believe both of the above should work in a standard vue 2.x project, although the above still does not work for me, when i have a global style.css file imported in to main.js I sincerely wish the Vue Cookbook or docs would explain this better for newbs, infact most experienced devs still get confused around post css and vue.

Did you find the solution to this in the end?

You can add it in vue.config.js

autoprefixer is enabled by default, but i am unsure if you edit the css object in vue.config.js if any setting will be overwritten.

So all plugin options should be inserted in css.loadOptions.plugins[]

At this moment i have disabled purgecss and postcss presets.