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/[email protected]

├─ [email protected]

├─ [email protected]

├─ [email protected]

├─ [email protected]

├─ [email protected]

├─ [email protected]

├─ [email protected]

├─ [email protected]

└─ [email protected]

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 ?

tmhao2005 · Accepted Answer · 2020-12-11 18:44:43Z

5

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',
  },
})

answered Dec 11, 2020 at 18:44

tmhao2005

17.7k4 gold badges46 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using TailwindCSS with Symfony Webpack Encore

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related