質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

受付中

【Docker + Rails6系 + TailwindCSSバージョン2】tailwind.config.jsファイルでheightをカスタマイズしたが反映されない

rikudayo
rikudayo

総合スコア0

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

0回答

0評価

0クリップ

165閲覧

投稿2022/06/25 15:30

概要

Docker + Rails6系 + TailwindCSSバージョン2でアプリを作成しているのですが、カスタマイズしたheightを使用したくてtailwind.config.jsファイルを変更しました。

しかし、カスタマイズしたheightは反映されませんでした。

発生している問題

400pxというオリジナルサイズのheightをカスタマイズするため、tailwind.config.jsファイルを以下のように編集しました。

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: [], };

上記のように変更しただけでは、「h-400」とクラスを追加しても反映されなかったので、docker-compose downをしてからdocker-compose up -dをしました。

しかし、それでも「h-400」(height: 400px)は適用されませんでした。

何が問題なのかご教授いただけると嬉しいです泣

追記:JITモードも機能していないようなので、合わせて原因の究明ができると嬉しいです。

関連ファイルの状態

その他関連ファイルは以下のようになっています。

application.html.erb

# 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

# app/javascript/stylesheets/application.css @tailwind base; @tailwind components; @tailwind utilities;

app/javascript/packs/application.js

# 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

# 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

# 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

# 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

# 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

# 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

development.js

# config/webpack/development.js process.env.NODE_ENV = process.env.NODE_ENV || "development"; const environment = require("./environment"); module.exports = environment.toWebpackConfig();

environment.js

# 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%s\x1b[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

# 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"]

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです