title: Unable to deploy TailwindCSS on a Rails 6 app to Heroku
body: <p>I'm currently trying to deploy my rails 6 application to Heroku. I tried the answer in a post about a <a href="https://stackoverflow.com/questions/59831329/rails-6-and-tailwind-css-does-not-deploy-to-heroku">similar issue but had no luck.</a>. I'm not sure where the error is coming from since the styles work well on development but break when pushing to production. Not sure if it has to do with the fact that it is currently compiling css assets with sass?</p>
  
  <pre><code> [14] ./node_modules/@rails/actiontext/app/javascript/actiontext/index.js + 1 modules 2.64 KiB {0} [built]
  remote:             |    2 modules
  remote:            + 7 hidden modules
  remote:        
  remote:        ERROR in ./app/javascript/stylesheets/application.scss
  remote:        Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
  remote:        ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
  remote:        
  remote:        @import "tailwindcss/base";
  remote:        ^
  remote:              File to import not found or unreadable: tailwindcss/base.
  remote:              in /tmp/build_d98149372aae5001d8aada1182784254/app/javascript/stylesheets/application.scss (line 1, column 1)
  remote:            at runLoaders (/tmp/build_d98149372aae5001d8aada1182784254/node_modules/webpack/lib/NormalModule.js:316:20)
  </code></pre>
  
  <p>Not sure why is <code>File to import not found or unreadable: tailwindcss/base.</code> not loading. From the documentation on <a href="https://tailwindcss.com/docs/installation/#app" rel="noreferrer">Tailwind it shows to add it via <code>@import</code></a></p>
  
  <pre><code>javascript/stylesheets/application.scss  
  ​
  @import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "tailwindcss/utilities";
  </code></pre>
  
  <p>Tailwind is also showing in the dependencies.</p>
  
  <pre><code>package.json
  
    "version": "0.1.0",
    "devDependencies": {
      "tailwindcss": "^1.2.0",
      "webpack-dev-server": "^3.7.1"
    }
  </code></pre>
  
  <p>views/layouts/application.html.erb</p>
  
  <pre><code>&lt;%= csrf_meta_tags %&gt;
  &lt;%= csp_meta_tag %&gt;
  
  &lt;%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %&gt;
  &lt;%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %&gt;
  &lt;%= stylesheet_pack_tag 'application', media: 'all',  'data-turbolinks-track': 'reload' %&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
  &lt;meta name="theme-color" content="#000000" /&gt;
  </code></pre>
  
  <p>if no asset processor is defined it defaults to sass which is what I'm using to compile the css. I thought this could be a reason why is not working.</p>
  
  <p>config/environments/production.rb                                                                                        </p>
  
  <pre><code>  # Compress CSS using a preprocessor.
    # config.assets.css_compressor = :sass
    config.assets.js_compressor = :uglifier
  </code></pre>
  
  <p>postcss.config.js</p>
  
  <pre><code>  module.exports = {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
          require('postcss-import'),
          require('postcss-flexbugs-fixes'),
          require('postcss-preset-env')({
            autoprefixer: {
              flexbox: 'no-2009'
            },
            stage: 3
          })
        ]
      }
  </code></pre>
  
  <p>From reading the related Stack overflow post set  <code>extract_css:</code> to true</p>
  
  <p>webpacker.yml</p>
  
  <pre><code>production:
    &lt;&lt;: *default
  
    # Production depends on precompilation of packs prior to booting for performance.
    compile: false
  
    # Extract and emit a css file
    extract_css: true
  
    # Cache manifest.json for performance
    cache_manifest: true
  </code></pre>
  
  <p>What could the problem be?</p>