Tailwindcss-module: How to integrate postcss plugin after tailwindcss

[samuells]

I am using the @nuxtjs/tailwindcss package in the nuxtjs project and I wanted to add to the postCSS plugin also px-to-rem plugin (https://github.com/cuth/postcss-pxtorem). I can't correctly setup the order of the postCSS plugins in nuxt.config.js.

My setup of nuxt.config.js:

build: {
    postcss: {
      plugins: {
        'postcss-pxtorem': {
          propList: [
            '*',
            '!clip-path',
            '!letter-spacing',
            '!border*',
            '!background-image'
          ]
        }
      }
    },
...
}

This works on all code written directly in components style section:

<style lang="postcss">
.test {
  padding-left: 50px;
  border-width: 10px;
}
</style>

so this will be change to

.test {
  padding-left: 3.125rem;
  border-width: 10px;
}

But it doesn't work on properties coming from tailwind and px used in tailwind.config.js

I guess the tailwind is loaded after the postCSS plugin, but I wasn't able to load px-to-rem plugin after tailwind

[Atinux]

Hey @samuells

Sorry for the late answer, actually you can specify TailwindCSS order by also specifying it in the postcss.plugin object:

import { join } from 'path'

export default {
  // ...
  build: {
    postcss: {
      plugins: {
        tailwindcss: join(__dirname, 'tailwind.config.js'),
        'postcss-pxtorem': {
          propList: [
            '*',
            '!clip-path',
            '!letter-spacing',
            '!border*',
            '!background-image'
          ]
        }
      }
    }
  }
}