Using TailwindCSS with Symfony Webpack Encore

Question

I'm having trouble setting up TailwindCSS with Symfony and I'm not sure what's wrong

webpack.config.js

var Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addStyleEntry('tailwind', './assets/css/tailwind.css')
    .enablePostCssLoader((options) => {
         options.config = {
          // directory where the postcss.config.js file is stored
                 path: './postcss.config.js'
         };
    })
    .splitEntryChunks()

    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

;

module.exports = Encore.getWebpackConfig();

tailwind.css

@tailwind base;

@tailwind components;

@tailwind utilities;

postcss.config.js

let tailwindcss = require('tailwindcss');

module.exports = {
    plugins: [
        tailwindcss('./tailwind.config.js'), // your tailwind.js configuration file path
        require('autoprefixer'),
        require('postcss-import')
    ]
}

tailwind.config.js

module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: [],
  prefix:,
}

Here is the output of yarn encore dev

yarn run v1.22.0 Running webpack ...

ERROR Failed to compile with 1 errors

error in ./assets/css/tailwind.css

ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'config'. These properties are valid: object { postcssOptions?, execute?, sourceMap? }

Entrypoint tailwind = runtime.js

ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'config'. These properties are valid: object { postcssOptions?, execute?, sourceMap? } at validate (./node_modules/schema-utils/dist/validate.js:104:11) at Object.loader (./node_modules/postcss-loader/dist/index.js:43:29)" -t "Webpack Encore" error Command failed with exit code 2. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command

I have node v14.15.0, I tried to yarn upgrade. Here are my direct dependencies :

success Saved lockfile. success Saved 598 new dependencies. info Direct dependencies ├─ @symfony/webpack-encore@0.33.0

├─ autoprefixer@10.1.0

├─ core-js@3.8.1

├─ datatables.net@1.10.22

├─ postcss-import@13.0.0

├─ postcss-loader@4.1.0

├─ postcss@8.2.1

├─ regenerator-runtime@0.13.7

├─ tailwindcss@2.0.2

└─ webpack-notifier@1.12.0

Like I said previously, I'm not sure what is wrong and my attempt to correct the problem on my own failed. The error seems to be coming from postcss or at least something inside my file that postcss doesn't like.

Could someone explain me where is this error coming from and how to correct it ?

Answer 1

Looks like postcss-loader has changed their api already by moving config option into postcssOptions instead.

Let's try with new option as following:

Encore
// ...
.enablePostCssLoader((options) => {
  // new option outlined here https://webpack.js.org/loaders/postcss-loader/
  options.postcssOptions = {
    config: './postcss.config.js',
  },
})