title: Webpack with Svelte component style using Tailwindcss+postcss
body: <p>I am working on a project with Svelte and Tailwindcss. I use Webpack as my bundle. I obviously use postcss and purgess to reduce the size of my css.</p>
  
  <p>While in development mode, I don't purge anything, it works just fine but when I want to build the project everything breaks.</p>
  
  <p><strong>The tailwind classes I directly use in my template work, they end up in the final css bundle. The custom css I write inside  are purged.</strong></p>
  
  <p>postcss.config.js</p>
  
  <pre><code>const purgecss = require('@fullhuman/postcss-purgecss');
  
  const production = process.env.NODE_ENV === 'production';
  
  module.exports = ({ file, options, env }) =&gt; ({
    plugins: [
      require('postcss-import'),
      require('postcss-preset-env'),
      require('tailwindcss'),
      require('autoprefixer'),
      production &amp;&amp;
        purgecss({
          content: ['./src/**/*.svelte'],
          defaultExtractor: content =&gt; {
            return content.match(/[A-Za-z0-9-_:/]+/g) || [];
          }
        }),
      production &amp;&amp; require('cssnano')
    ]
  });
  </code></pre>
  
  <p>webpack.common.js</p>
  
  <pre><code>const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  const CopyWebpackPlugin = require('copy-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  const PATHS = require('./paths');
  
  module.exports = {
    entry: {
      app: PATHS.src,
      background: PATHS.src + '/background.js'
    },
    output: {
      path: PATHS.build,
      filename: '[name].js'
    },
    resolve: {
      alias: {
        svelte: PATHS.modules + '/svelte'
      },
      extensions: ['.mjs', '.js', '.svelte'],
      mainFields: ['svelte', 'browser', 'module', 'main']
    },
    module: {
      rules: [
        {
          test: /\.(html|svelte)$/,
          exclude: /node_modules/,
          use: {
            loader: 'svelte-loader',
            options: {
              emitCss: true
            }
          }
        },
        {
          test: /\.(png|jpe?g|gif)$/i,
          use: [
            {
              loader: 'file-loader',
              options: {
                outputPath: 'images',
                name: '[name].[ext]'
              }
            }
          ]
        }
      ]
    },
    plugins: [
      new CleanWebpackPlugin(),
      new CopyWebpackPlugin([
        {
          from: PATHS.public,
          to: PATHS.build
        }
      ]),
      new HtmlWebpackPlugin({
        title: 'Hanzi xiaobai',
        inject: false,
        template: require('html-webpack-template'),
        appMountId: 'root',
        lang: 'en',
        mobile: true
      })
    ]
  };
  </code></pre>
  
  <p>webpack.production.js</p>
  
  <pre><code>const merge = require('webpack-merge');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  const common = require('./webpack.common');
  
  module.exports = merge(common, {
    mode: 'production',
    devtool: 'source-map',
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader
            },
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1
              }
            },
            'postcss-loader'
          ]
        }
      ]
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: '[name].css'
      })
    ]
  });
  </code></pre>
  
  <p>exemple.svelte</p>
  
  <pre><code>&lt;style type="type/postcss"&gt;
    h1 {
      @apply text-gray-200 font-bold uppercase text-2xl antialiased
    }
  &lt;/style&gt;
  
  &lt;div class="h-48 flex flex-col items-center"&gt;
    &lt;h1&gt;Title&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In this example <code>h-48 flex flex-col items-center</code> are correctly output and applied. But <code>text-gray-200 font-bold uppercase text-2xl antialiased</code> are not.</p>
  
  <p>I tried using <code>svelte-preprocess-postcss</code> and other stuff, but I am more or less tweaking things without a clue about what I am doing.</p>