title: Tailwind CSS in next.JS server isn't rendering any styles
body: <p>I have a basic web server using node.js, next.js, Webpack, and Tailwind CSS.</p>
  <p>However, when I run the server, none of the Tailwind styles are applied, and so the page renders without any styling.</p>
  <p><strong>Expected</strong>
  <a href="https://i.stack.imgur.com/yFZKj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yFZKj.png" alt="enter image description here" /></a></p>
  <p><strong>Actual</strong>
  <a href="https://i.stack.imgur.com/cSSN3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cSSN3.png" alt="enter image description here" /></a></p>
  <p><strong>/styles/tailwind.css</strong></p>
  <pre><code>@tailwind  base;
  @tailwind  components;
  @tailwind  utilities;
  </code></pre>
  <p><strong>/package.json</strong></p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;name&quot;: &quot;app&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;main&quot;: &quot;index.js&quot;,
    &quot;scripts&quot;: {
      &quot;build:css&quot;: &quot;postcss styles/tailwind.css -o styles/main.css&quot;,
      &quot;dev&quot;: &quot;node server.js&quot;,
      &quot;build&quot;: &quot;next build&quot;,
      &quot;start&quot;: &quot;next start -p $PORT&quot;,
      &quot;heroku-postbuild&quot;: &quot;npm run build&quot;,
      &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;
    },
    &quot;keywords&quot;: [],
    &quot;author&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;dependencies&quot;: {
      &quot;babel-cli&quot;: &quot;^6.26.0&quot;,
      &quot;babel-eslint&quot;: &quot;^8.2.2&quot;,
      &quot;classnames&quot;: &quot;^2.2.6&quot;,
      &quot;compression&quot;: &quot;^1.7.4&quot;,
      &quot;dotenv&quot;: &quot;^7.0.0&quot;,
      &quot;dotenv-webpack&quot;: &quot;^1.7.0&quot;,
      &quot;express&quot;: &quot;^4.16.4&quot;,
      &quot;http-proxy-middleware&quot;: &quot;^0.19.1&quot;,
      &quot;immutable&quot;: &quot;^4.0.0-rc.12&quot;,
      &quot;isomorphic-unfetch&quot;: &quot;^3.0.0&quot;,
      &quot;js-cookie&quot;: &quot;^2.2.0&quot;,
      &quot;next&quot;: &quot;^9.0.1&quot;,
      &quot;next-cookies&quot;: &quot;^1.1.2&quot;,
      &quot;next-redux-wrapper&quot;: &quot;^3.0.0-alpha.2&quot;,
      &quot;prop-types&quot;: &quot;^15.7.2&quot;,
      &quot;ramda&quot;: &quot;^0.26.1&quot;,
      &quot;react&quot;: &quot;^16.8.4&quot;,
      &quot;react-cookie&quot;: &quot;^3.1.2&quot;,
      &quot;react-dom&quot;: &quot;^16.8.4&quot;,
      &quot;react-redux&quot;: &quot;^6.0.1&quot;,
      &quot;react-router-redux&quot;: &quot;^4.0.8&quot;,
      &quot;react-timeago&quot;: &quot;^4.4.0&quot;,
      &quot;redux&quot;: &quot;^4.0.1&quot;,
      &quot;redux-immutable&quot;: &quot;^4.0.0&quot;,
      &quot;redux-immutable-state-invariant&quot;: &quot;^2.1.0&quot;,
      &quot;redux-saga&quot;: &quot;^1.0.2&quot;,
      &quot;redux-thunk&quot;: &quot;^2.3.0&quot;,
      &quot;semantic-ui-react&quot;: &quot;^0.86.0&quot;,
      &quot;style-loader&quot;: &quot;^1.3.0&quot;,
      &quot;styled-components&quot;: &quot;^4.2.0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;autoprefixer&quot;: &quot;^9.8.6&quot;,
      &quot;babel-plugin-styled-components&quot;: &quot;^1.10.0&quot;,
      &quot;css-loader&quot;: &quot;^4.3.0&quot;,
      &quot;postcss-cli&quot;: &quot;^8.0.0&quot;,
      &quot;postcss-import&quot;: &quot;^12.0.1&quot;,
      &quot;postcss-loader&quot;: &quot;^4.0.3&quot;,
      &quot;postcss-preset-env&quot;: &quot;^6.7.0&quot;,
      &quot;precss&quot;: &quot;^4.0.0&quot;,
      &quot;tailwindcss&quot;: &quot;^1.8.12&quot;,
      &quot;typescript&quot;: &quot;^4.0.3&quot;,
      &quot;webpack&quot;: &quot;^4.44.2&quot;,
      &quot;mini-css-extract-plugin&quot;: &quot;^0.12.0&quot;
    }
  }
  </code></pre>
  <p><strong>/postcss.config.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    plugins: [
      require('precss'),
      require('postcss-import'),
      require('tailwindcss'),
      require('autoprefixer'),
      require('postcss-preset-env'),
    ]
  }
  </code></pre>
  <p><strong>/tailwind.config.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    future: {},
    purge: [],
    theme: {
      extend: {},
    },
    variants: {},
    plugins: [],
  }
  </code></pre>
  <p><strong>/pages/_app.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import '../styles/tailwind.css'
  //....
  </code></pre>
  <p><strong>/pages/sample.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  
  import '../styles/tailwind.css'
  
  export default function Sample() {
    return (
      &lt;div className=&quot;p-4 bg-white rounded shadow&quot;&gt;
        &lt;h1 className=&quot;text-2xl font-bold&quot;&gt;Next.js&lt;/h1&gt;
        &lt;p className=&quot;text-gray-500&quot;&gt;
          with Tailwind CSS &amp; postcss-preset-env. Now uses tailwind purge method for
          production builds.
        &lt;/p&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><strong>/next.config.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>const { parsed: localEnv } = require('dotenv').config();
  const webpack = require('webpack');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  const path = require('path');
  const Dotenv = require('dotenv-webpack');
  
  // next.config.js
  module.exports = {
    target: 'serverless',
    serverRuntimeConfig: {
      // Will only be available on the server side
    },
    env: {
      //...
    },
    webpack(config) {
      config.plugins = config.plugins || [];
  
      const rule = {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
  
      config.module.rules.push(rule)
  
      config.plugins = [
        ...config.plugins,
  
        // Read the .env file
        new Dotenv({
          path: path.join(__dirname, '.env'),
          systemvars: true,
        }),
        new MiniCssExtractPlugin()
      ];
  
      return config;
    },
  };
  
  </code></pre>