Use postcss-import + tailwind + postcss-html

[silveltman]

I'm trying to setup postCSS to use:

1. postcss-import (1 folder with multple .pcss files, which are all imported from a main.pcss)
2. Tailwindcss
3. postcss-html so I can have a tag in my components, so I can @apply tailwind classes to some make custom classes and maybe write some extra custom css. So a bit like in vue single file components I gues.

I'm using 11ty.

My tailwind.config.js for now:

module.exports = {
  syntax: 'postcss-syntax',
  plugins: [
    require('postcss-import'),
    require('autoprefixer'),
    require('cssnano'),
    require('postcss-preset-env'),
    require('postcss-nested'),
    require('tailwindcss'),
  ],
}

How can I do this and is using this plugin/syntax the right way to go?

Thanks!