Customized “height” in tailwind.config.js is not working【Rails(v6) + Docker + TailwindCSS(v2)】

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.

What I want to solve

I’m creating an app with Docker, Rails6 and TailwindCSS v2.

I wanted to use a customized Height(400px), so I added the following code to tailwind.config.js.

# tailwind.config.js

module.exports = {
  mode: "jit",
  purge: [
    "./app/views/**/*.html.erb",
    "./app/helpers/**/*.rb",
    "./app/javascript/**/*.js",
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      height: {
        400: "400px",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

But it didn’t work. And maybe JIT is not working either. Because I tried “h-[400px]And it didn’t work.

I would be glad if you could tell me what the problem is.

Related File Status

Other related files are as follows

# application.html.erb

<!DOCTYPE html>
<html>

<head>
  <title>Myapp</title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

<body>
  <%= yield %>
</body>

</html>
# app/javascript/stylesheets/application.css

@tailwind base;
@tailwind components;
@tailwind utilities;
# 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("@rails/ujs").start();
require("turbolinks").start();
require("@rails/activestorage").start();
require("channels");
import "stylesheets/application.css";

// 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 <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
# postcss.config.js

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("postcss-import"),
    require("postcss-flexbugs-fixes"),
    require("postcss-preset-env")({
      autoprefixer: {
        flexbox: "no-2009",
      },
      stage: 3,
    }),
  ],
};
# package.json

{
  "name": "myapp",
  "private": true,
  "dependencies": {
    "@fullhuman/postcss-purgecss": "4",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.3",
    "autoprefixer": "10",
    "postcss": "8",
    "postcss-loader": "4",
    "tailwindcss": "2",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.14",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.46.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3"
  }
}
# docker-compose.yml

version: "3"
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 "bin/webpack-dev-server"
    ports:
      - '3035:3035'
  db:
    image: mysql:8.0
    volumes:
      - ./tmp/db:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
        - "4306:3306"
  web:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/myapp
      - gem_data:/usr/local/bundle
    ports:
      - "3000:3000"
    depends_on:
      - db
    environment:
      WEBPACKER_DEV_SERVER_HOST: webpack
volumes:
  mysql_data:
  gem_data:
# 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
 */
# webpacker.yml

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &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:
  <<: *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:
      "Access-Control-Allow-Origin": "*"
    watch_options:
      ignored: "**/node_modules/**"

test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *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
# config/webpack/development.js

process.env.NODE_ENV = process.env.NODE_ENV || "development";

const environment = require("./environment");

module.exports = environment.toWebpackConfig();
# config/webpack/environment.js const { environment } = require("@rails/webpacker");  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 === "postcss-loader") { if (subloader.options.postcssOptions) { console.log( "x1b[31m%sx1b[0m",
        "Remove postcssOptions workaround in config/webpack/environment.js"
      );
    } else {
      subloader.options.postcssOptions = subloader.options.config;
      delete subloader.options.config;
    }
  }
}

environment.loaders.keys().forEach((loaderName) => {
  const loader = environment.loaders.get(loaderName);
  loader.use.forEach(hotfixPostcssLoaderConfig);
});
# Dockerfile

FROM ruby:2.6.6
RUN apt-get update -qq && apt-get install -y postgresql-client

# Node.jsをインストール
RUN curl -sL https://deb.nodesource.com/setup_16.x | bash - && apt-get install -y nodejs

# yarnパッケージ管理ツールをインストール
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && 
  echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && 
  apt-get update && 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 ["entrypoint.sh"]
EXPOSE 3000 # Configure the main process to run when running the image CMD ["rails", "server", "-b", "0.0.0.0"]

Leave a Comment