Tailwind with Flask-assets - build error with postcss

Question

I installed POSTCSS and Flask assets into my build and want to use tailwind. My environment is the WSL Unbuntu on windows 11 so all is in a Unbuntu Shell

I installed Flask-assets

# CSS Build
assets = Environment(app)
css = Bundle("src/style.css", output="dist/main.css", filters="postcss")
assets.register("css", css)
css.build()

I have my 'src/styles.css` and it looks like so:

@tailwind base;
@tailwind components;
@tailwind utilities;

And my tailwind config looks like this:

const path = require('path');

module.exports = (ctx) => ({
  plugins: [
    require('tailwindcss')(path.resolve(__dirname, 'tailwind.config.js')),
    require('autoprefixer'),
    process.env.FLASK_PROD === 'production' && require('@fullhuman/postcss-purgecss')({
      content: [
        path.resolve(__dirname, 'templates/**/*.html')
      ],
      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
    })
  ],
});

I have no build errors or anything causing issues but my 'dist/main.css' is outputting like so:

@tailwind base;
@tailwind components;
@tailwind utilities;
/*# sourceMappingURL=data:application/json;base64, etc etc 

As you can see its not building out correctly and Im not sure where I went wrong. I installed with npm the following for postcss

npm install tailwindcss postcss postcss-cli autoprefixer @fullhuman/postcss-purgecss

and I followed this guide as I'm new to tailwind https://testdriven.io/blog/flask-htmx-tailwind/

If anyone can shed some light on the issue id be very happy

Answer 1

The example says you need to run

tailwindcss -i ./static/src/main.css -o ./static/dist/main.css --minify

You've done that part or did flask-assets automate the whole process for you?

The example actually says that tailwind should look like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./zephyr/templates/**/*.html',],
  theme: {
    extend: {},
  },
  plugins: [],
}

Answer 2

So it would seem using a postcss.config.js did the trick for getting assets to build

const path = require('path');

module.exports = (ctx) => ({
  plugins: [
    require('tailwindcss')(path.resolve(__dirname, 'tailwind.config.js')),
    require('autoprefixer'),
    process.env.FLASK_PROD === 'production' && require('@fullhuman/postcss-purgecss')({
      content: [
        path.resolve(__dirname, 'templates/**/*.html')
      ],
      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
    })
  ],
});