title: Using TailwindCSS with Symfony Webpack Encore
body: <p>I'm having trouble setting up TailwindCSS with Symfony and I'm not sure what's wrong</p>
  <p>webpack.config.js</p>
  <pre class="lang-js prettyprint-override"><code>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) =&gt; {
           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) =&gt; {
          config.useBuiltIns = 'usage';
          config.corejs = 3;
      })
  
  ;
  
  module.exports = Encore.getWebpackConfig();
  </code></pre>
  <p>tailwind.css</p>
  <pre class="lang-css prettyprint-override"><code>@tailwind base;
  
  @tailwind components;
  
  @tailwind utilities;
  </code></pre>
  <p>postcss.config.js</p>
  <pre class="lang-js prettyprint-override"><code>let tailwindcss = require('tailwindcss');
  
  module.exports = {
      plugins: [
          tailwindcss('./tailwind.config.js'), // your tailwind.js configuration file path
          require('autoprefixer'),
          require('postcss-import')
      ]
  }
  </code></pre>
  <p>tailwind.config.js</p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    theme: {
      extend: {}
    },
    variants: {},
    plugins: [],
    prefix:,
  }
  </code></pre>
  <p>Here is the output of <code>yarn encore dev</code></p>
  <blockquote>
  <p>yarn run v1.22.0 Running webpack ...</p>
  <p>ERROR  Failed to compile with 1 errors</p>
  <p>error  in ./assets/css/tailwind.css</p>
  <p>ValidationError: Invalid options object. PostCSS Loader has been
  initialized using an options object that does not match the API
  schema.</p>
  <ul>
  <li>options has an unknown property 'config'. These properties are valid:    object { postcssOptions?, execute?, sourceMap? }</li>
  </ul>
  <p>Entrypoint tailwind = runtime.js</p>
  <p>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.</p>
  <ul>
  <li>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)&quot; -t &quot;Webpack
  Encore&quot; error Command failed with exit code 2. info Visit
  <a href="https://yarnpkg.com/en/docs/cli/run" rel="nofollow noreferrer">https://yarnpkg.com/en/docs/cli/run</a> for documentation about this
  command</li>
  </ul>
  </blockquote>
  <p>I have node v14.15.0, I tried to yarn upgrade. Here are my direct dependencies :</p>
  <blockquote>
  <p>success Saved lockfile.
  success Saved 598 new dependencies.
  info Direct dependencies
  ├─ @symfony/webpack-encore@0.33.0</p>
  <p>├─ autoprefixer@10.1.0</p>
  <p>├─ core-js@3.8.1</p>
  <p>├─ datatables.net@1.10.22</p>
  <p>├─ postcss-import@13.0.0</p>
  <p>├─ postcss-loader@4.1.0</p>
  <p>├─ postcss@8.2.1</p>
  <p>├─ regenerator-runtime@0.13.7</p>
  <p>├─ tailwindcss@2.0.2</p>
  <p>└─ webpack-notifier@1.12.0</p>
  </blockquote>
  <p>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.</p>
  <p>Could someone explain me where is this error coming from and how to correct it ?</p>