title: Customized "height" in tailwind.config.js is not working【Rails(v6) + Docker + TailwindCSS(v2)】
body: <p>Hi！ I'm from Tokyo of Japan. I thought I should tell you at the beginning that my English is so poor, so I might cause you trouble, I'm sorry.</p>
  <h2>What I want to solve</h2>
  <p>I'm creating an app with Docker, Rails6 and TailwindCSS v2.</p>
  <p>I wanted to use a customized Height(400px), so I added the following code to tailwind.config.js.</p>
  <pre><code># tailwind.config.js
  
  module.exports = {
    mode: &quot;jit&quot;,
    purge: [
      &quot;./app/views/**/*.html.erb&quot;,
      &quot;./app/helpers/**/*.rb&quot;,
      &quot;./app/javascript/**/*.js&quot;,
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {
        height: {
          400: &quot;400px&quot;,
        },
      },
    },
    variants: {
      extend: {},
    },
    plugins: [],
  };
  </code></pre>
  <p>But it didn't work. And maybe JIT is not working either. Because I tried &quot;h-[400px]&quot; and it didn't work.</p>
  <p>I would be glad if you could tell me what the problem is.</p>
  <h2>Related File Status</h2>
  <p>Other related files are as follows</p>
  <pre><code># application.html.erb
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Myapp&lt;/title&gt;
    &lt;%= csrf_meta_tags %&gt;
    &lt;%= csp_meta_tag %&gt;
  
    &lt;%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %&gt;
    &lt;%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %&gt;
    &lt;%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;%= yield %&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <pre><code># app/javascript/stylesheets/application.css
  
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  </code></pre>
  <pre><code># app/javascript/packs/application.js
  
  // This file is automatically compiled by Webpack, along with any other files
  // present in this directory. You're encouraged to place your actual application logic in
  // a relevant structure within app/javascript and only use these pack files to reference
  // that code so it'll be compiled.
  
  require(&quot;@rails/ujs&quot;).start();
  require(&quot;turbolinks&quot;).start();
  require(&quot;@rails/activestorage&quot;).start();
  require(&quot;channels&quot;);
  import &quot;stylesheets/application.css&quot;;
  
  // Uncomment to copy all static images under ../images to the output folder and reference
  // them with the image_pack_tag helper in views (e.g &lt;%= image_pack_tag 'rails.png' %&gt;)
  // or the `imagePath` JavaScript helper below.
  //
  // const images = require.context('../images', true)
  // const imagePath = (name) =&gt; images(name, true)
  </code></pre>
  <pre><code># postcss.config.js
  
  module.exports = {
    plugins: [
      require(&quot;tailwindcss&quot;),
      require(&quot;postcss-import&quot;),
      require(&quot;postcss-flexbugs-fixes&quot;),
      require(&quot;postcss-preset-env&quot;)({
        autoprefixer: {
          flexbox: &quot;no-2009&quot;,
        },
        stage: 3,
      }),
    ],
  };
  </code></pre>
  <pre><code># package.json
  
  {
    &quot;name&quot;: &quot;myapp&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@fullhuman/postcss-purgecss&quot;: &quot;4&quot;,
      &quot;@rails/actioncable&quot;: &quot;^6.0.0&quot;,
      &quot;@rails/activestorage&quot;: &quot;^6.0.0&quot;,
      &quot;@rails/ujs&quot;: &quot;^6.0.0&quot;,
      &quot;@rails/webpacker&quot;: &quot;5.4.3&quot;,
      &quot;autoprefixer&quot;: &quot;10&quot;,
      &quot;postcss&quot;: &quot;8&quot;,
      &quot;postcss-loader&quot;: &quot;4&quot;,
      &quot;tailwindcss&quot;: &quot;2&quot;,
      &quot;turbolinks&quot;: &quot;^5.2.0&quot;,
      &quot;vue&quot;: &quot;^2.6.14&quot;,
      &quot;vue-loader&quot;: &quot;^15.7.0&quot;,
      &quot;vue-template-compiler&quot;: &quot;^2.6.12&quot;,
      &quot;webpack&quot;: &quot;^4.46.0&quot;
    },
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;devDependencies&quot;: {
      &quot;webpack-cli&quot;: &quot;^3.3.12&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3&quot;
    }
  }
  </code></pre>
  <pre><code># docker-compose.yml
  
  version: &quot;3&quot;
  services:
    webpack:
      build: .
      volumes:
        - .:/myapp
        - gem_data:/usr/local/bundle
      environment:
        NODE_ENV: development
        RAILS_ENV: development
        WEBPACKER_DEV_SERVER_HOST: 0.0.0.0
      command: bash -c &quot;bin/webpack-dev-server&quot;
      ports:
        - '3035:3035'
    db:
      image: mysql:8.0
      volumes:
        - ./tmp/db:/var/lib/mysql
      environment:
        MYSQL_ROOT_PASSWORD: password
      ports:
          - &quot;4306:3306&quot;
    web:
      build: .
      command: bash -c &quot;rm -f tmp/pids/server.pid &amp;&amp; bundle exec rails s -p 3000 -b '0.0.0.0'&quot;
      volumes:
        - .:/myapp
        - gem_data:/usr/local/bundle
      ports:
        - &quot;3000:3000&quot;
      depends_on:
        - db
      environment:
        WEBPACKER_DEV_SERVER_HOST: webpack
  volumes:
    mysql_data:
    gem_data:
  </code></pre>
  <pre><code># app/assets/stylesheets/application.css
  
  /*
   * This is a manifest file that'll be compiled into application.css, which will include all the files
   * listed below.
   *
   * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
   * vendor/assets/stylesheets directory can be referenced here using a relative path.
   *
   * You're free to add application-wide styles to this file and they'll appear at the bottom of the
   * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
   * files in this directory. Styles in this file should be added after the last require_* statement.
   * It is generally better to create a new file per style scope.
   *
   *= require_tree .
   *= require_self
   */
  </code></pre>
  <pre><code># webpacker.yml
  
  # Note: You must restart bin/webpack-dev-server for changes to take effect
  
  default: &amp;default
    source_path: app/javascript
    source_entry_path: packs
    public_root_path: public
    public_output_path: packs
    cache_path: tmp/cache/webpacker
    webpack_compile_output: true
  
    # Additional paths webpack should lookup modules
    # ['app/assets', 'engine/foo/app/assets']
    additional_paths: []
  
    # Reload manifest.json on all requests so we reload latest compiled packs
    cache_manifest: false
  
    # Extract and emit a css file
    extract_css: false
  
    static_assets_extensions:
      - .jpg
      - .jpeg
      - .png
      - .gif
      - .tiff
      - .ico
      - .svg
      - .eot
      - .otf
      - .ttf
      - .woff
      - .woff2
  
    extensions:
      - .vue
      - .mjs
      - .js
      - .sass
      - .scss
      - .css
      - .module.sass
      - .module.scss
      - .module.css
      - .png
      - .svg
      - .gif
      - .jpeg
      - .jpg
  
  development:
    &lt;&lt;: *default
    compile: true
  
    # Reference: https://webpack.js.org/configuration/dev-server/
    dev_server:
      https: false
      host: localhost
      port: 3035
      public: localhost:3035
      hmr: true
      # Inline should be set to true if using HMR
      inline: true
      overlay: true
      compress: true
      disable_host_check: true
      use_local_ip: false
      quiet: false
      pretty: false
      headers:
        &quot;Access-Control-Allow-Origin&quot;: &quot;*&quot;
      watch_options:
        ignored: &quot;**/node_modules/**&quot;
  
  test:
    &lt;&lt;: *default
    compile: true
  
    # Compile test packs to a separate directory
    public_output_path: packs-test
  
  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>
  <pre><code># config/webpack/development.js
  
  process.env.NODE_ENV = process.env.NODE_ENV || &quot;development&quot;;
  
  const environment = require(&quot;./environment&quot;);
  
  module.exports = environment.toWebpackConfig();
  </code></pre>
  <pre><code># config/webpack/environment.js
  
  const { environment } = require(&quot;@rails/webpacker&quot;);
  const { VueLoaderPlugin } = require('vue-loader')
  const vue = require('./loaders/vue')
  
  environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
  environment.loaders.prepend('vue', vue)
  module.exports = environment;
  
  function hotfixPostcssLoaderConfig(subloader) {
    const subloaderName = subloader.loader;
    if (subloaderName === &quot;postcss-loader&quot;) {
      if (subloader.options.postcssOptions) {
        console.log(
          &quot;\x1b[31m%s\x1b[0m&quot;,
          &quot;Remove postcssOptions workaround in config/webpack/environment.js&quot;
        );
      } else {
        subloader.options.postcssOptions = subloader.options.config;
        delete subloader.options.config;
      }
    }
  }
  
  environment.loaders.keys().forEach((loaderName) =&gt; {
    const loader = environment.loaders.get(loaderName);
    loader.use.forEach(hotfixPostcssLoaderConfig);
  });
  </code></pre>
  <pre><code># Dockerfile
  
  FROM ruby:2.6.6
  RUN apt-get update -qq &amp;&amp; apt-get install -y postgresql-client
  
  # Node.jsをインストール
  RUN curl -sL https://deb.nodesource.com/setup_16.x | bash - &amp;&amp; apt-get install -y nodejs
  
  # yarnパッケージ管理ツールをインストール
  RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - &amp;&amp; \
    echo &quot;deb https://dl.yarnpkg.com/debian/ stable main&quot; | tee /etc/apt/sources.list.d/yarn.list &amp;&amp; \
    apt-get update &amp;&amp; apt-get install -y yarn
  
  # gem
  RUN mkdir /myapp
  WORKDIR /myapp
  COPY Gemfile /myapp/Gemfile
  COPY Gemfile.lock /myapp/Gemfile.lock
  RUN bundle install
  COPY . /myapp
  
  # Add a script to be executed every time the container starts.
  COPY entrypoint.sh /usr/bin/
  RUN chmod +x /usr/bin/entrypoint.sh
  ENTRYPOINT [&quot;entrypoint.sh&quot;]
  EXPOSE 3000
  
  # Configure the main process to run when running the image
  CMD [&quot;rails&quot;, &quot;server&quot;, &quot;-b&quot;, &quot;0.0.0.0&quot;]
  </code></pre>