title: TailwindCSS 3 + Symfony / webpack Encore Not Styling?
body: <p>I updated to TailwindCSS 3 in a symfony 6 app. When I compile the stylesheets there are no errors (it compiles successfully) but none of the tailwind class styles work. I notice the imports for tailwind don't seem to be translating from the @tailwindcss calls (they are just included as-is in the browser). Maybe a postCSS issue?</p>
  <p><code>webpack.config.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>const Encore = require('@symfony/webpack-encore');
  const path = require('path');
  
  // Manually configure the runtime environment if not already configured yet by the &quot;encore&quot; command.
  // It's useful when you use tools that rely on webpack.config.js file.
  if (!Encore.isRuntimeEnvironmentConfigured()) {
      Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
  }
  
  Encore
      // directory where compiled assets will be stored
      .setOutputPath('public/build/')
      // public path used by the web server to access the output path
      .setPublicPath('/build')
      // only needed for CDN's or sub-directory deploy
      //.setManifestKeyPrefix('build/')
  
      .copyFiles([
          {
              from: './assets/images',
              to: 'images/[path][name].[ext]',
          }
      ])
  
      /*
       * ENTRY CONFIG
       *
       * Each entry will result in one JavaScript file (e.g. app.js)
       * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
       */
  
      .addEntry('main', './assets/main.js')
  
      .addEntry('admin', './assets/admin.js')
  
      // When enabled, Webpack &quot;splits&quot; your files into smaller pieces for greater optimization.
      .splitEntryChunks()
  
      // will require an extra script tag for runtime.js
      // but, you probably want this, unless you're building a single-page app
      .enableSingleRuntimeChunk()
  
      /*
       * FEATURE CONFIG
       *
       * Enable &amp; configure other features below. For a full
       * list of features, see:
       * https://symfony.com/doc/current/frontend.html#adding-more-features
       */
      .cleanupOutputBeforeBuild()
      .enableBuildNotifications()
      .enableSourceMaps(!Encore.isProduction())
      // enables hashed filenames (e.g. app.abc123.css)
      .enableVersioning(Encore.isProduction())
  
      .configureBabel((config) =&gt; {
          config.plugins.push('@babel/plugin-proposal-class-properties');
      })
  
      // enables @babel/preset-env polyfills
      .configureBabelPresetEnv((config) =&gt; {
          config.useBuiltIns = 'usage';
          config.corejs = 3;
      })
  
      // enables Sass/SCSS support
      .enableSassLoader()
  
      // Enable PostCSS loader
      .enablePostCssLoader((options) =&gt; {
          options.postcssOptions = {
              // the directory where the postcss.config.js file is stored
              config: './postcss.config.js',
          };
      })
  
      .splitEntryChunks()
  ;
  
  module.exports = Encore.getWebpackConfig();
  </code></pre>
  <p><code>postcss.config.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>let tailwindcss = require('tailwindcss');
  
  module.exports = {
      plugins: [
          tailwindcss('./tailwind.config.js'),
          require('postcss-import'),
          require('autoprefixer')
      ]
  }
  </code></pre>
  <p><code>tailwind.config.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
      darkMode: 'media'
  }
  </code></pre>
  <p><code>main.css</code> (imported via <code>main.js</code>):</p>
  <pre class="lang-css prettyprint-override"><code>@import '~tailwindcss/base';
  @import '~tailwindcss/components';
  @import '~tailwindcss/utilities';
  
  /* Rest of custom content... */
  </code></pre>
  <p>I added <code>console.log()</code>s to the various config files and they all show as being loaded/accessed.</p>