title: Combining tailwind css with sass using webpack
body: <p>I'm struggling a bit getting Tailwind CSS to work with SASS and Webpack. It seems like the postcss configuration for tailwind doesn't really do anything in terms of processing <code>@tailwind preflight</code>, <code>@tailwind components</code> and <code>@tailwind utilities</code></p>
  
  <p>My set up is as follows:</p>
  
  <p><strong>layout.scss</strong></p>
  
  <pre><code>@import "~tailwindcss/preflight.css";
  @import "~tailwindcss/components.css";
  
  .my-class {
      @apply text-blue;    
      @apply border-red;
  }
  
  @import "~tailwindcss/utilities.css";
  </code></pre>
  
  <p><strong>entry.js</strong></p>
  
  <pre><code>import '../css/src/layout.scss';
  </code></pre>
  
  <p><strong>postcss.config.js</strong></p>
  
  <pre><code>const tailwindcss = require('tailwindcss');
  const purgecss = require('@fullhuman/postcss-purgecss');
  const cssnano = require('cssnano');
  const autoprefixer = require('autoprefixer');
  
  module.exports = {
      plugins: [
          tailwindcss('./tailwind.js'),
          cssnano({
              preset: 'default',
          }),
          purgecss({
              content: ['./views/**/*.cshtml']
          }),
          autoprefixer
      ]
   }
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>// NPM plugins
  const autoprefixer = require('autoprefixer');
  const WebpackNotifierPlugin = require('webpack-notifier');
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
  const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
  
  module.exports = {
      entry: {
          main: './scripts/entry.js'
      },
      output: {
          filename: '[name].bundle.js',
          publicPath: './'
      },
      watch: false,
      externals: {
          jquery: 'jQuery'
      },
      mode: 'development',
      plugins: [
          // Notify when build succeeds
          new WebpackNotifierPlugin({ alwaysNotify: true }),
  
          // Extract any CSS from any javascript file to process it as LESS/SASS using a loader
          new MiniCssExtractPlugin({
              fileame: "[name].bundle.css"
          }),
  
          // Minify CSS assets
          new OptimizeCSSAssetsPlugin({}),
  
          // Use BrowserSync plugin for file changes. I.e. if a CSS/SASS/LESS file changes, the changes will be injected directly in the browser with no page load
          new BrowserSyncPlugin({
              proxy: 'mysite.local',
              open: 'external',
              host: 'mysite.local',
              port: 3000,
              files: ['./dist/main.css', './views', './tailwind.js']
          },
              {
                  // disable reload from the webpack plugin since browser-sync will handle CSS injections and JS reloads
                  reload: false
              })
      ],
      module: {
          rules: [
              {
                  // Transpile ES6 scripts for browser support
                  test: /\.js$/,
                  exclude: /node_modules/,
                  use: {
                      loader: 'babel-loader',
                      options: {
                          presets: ['@babel/preset-env']
                      }
                  }
              },            
              {
                  test: /\.(png|jpg|gif|svg|eot|ttf|woff)$/,
                  use: [
                      {
                          loader: 'file-loader'
                      }
                  ]
              },       
              {
                  // Extract any SCSS content and minimize
                  test: /\.scss$/,
                  use: [                    
                      MiniCssExtractPlugin.loader,
                      { loader: 'css-loader' },
                      {
                          loader: 'postcss-loader',
                          options: {
                              plugins: () =&gt; [autoprefixer()]
                          }
                      },
                      {
                          loader: 'sass-loader',
                          options: {                            
                              plugins: () =&gt; [autoprefixer()]
                          }
                      } 
                  ]
              },
              {
                  // Extract any CSS content and minimize
                  test: /\.css$/,
                  use: [
                      MiniCssExtractPlugin.loader,
                      { loader: 'css-loader', options: { importLoaders: 1 } },
                      { loader: 'postcss-loader' }
                  ]
              }            
          ]
      }
  };
  </code></pre>
  
  <p>When I run Webpack, everything runs just fine, but the content of <code>/dist/main.css</code> is:</p>
  
  <p><code>@tailwind preflight;@tailwind components;@tailwind utilities;.my-class{@apply text-blue;@apply border-red}</code></p>
  
  <p>I suspect it's related to the (order of) loaders, but I can't seem to figure out why it's not getting processed correctly.</p>
  
  <p>Does anyone know what I'm doing wrong here? :-)</p>
  
  <p>Thanks in advance.</p>