Tailwind CSS

The following example uses Tailwind CSS to generate a CSS file.

Install these packages:

npm i magefront-plugin-postcss tailwindcss autoprefixer --save-dev

Add the following to your magefront.config.js file:

// magefront.config.js
import postcss from 'magefront-plugin-postcss'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'

export default {
    plugins: [
        postcss({
            src: 'css/tailwind.pcss',
            plugins: [
                tailwindcss({
                    content: ['app/design/frontend/**/*.{html,phtml}']
                }),
                autoprefixer()
            ]
        })
    ]
}

Create a file named tailwind.pcss in the web/css directory of your theme:

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