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

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

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

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

Ruby on Rails 6

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

Docker

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

Q&A

0回答

652閲覧

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

rikudayo

総合スコア0

docker-compose

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

Ruby on Rails 6

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

Docker

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

0グッド

0クリップ

投稿2022/06/25 15:30

概要

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

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

発生している問題

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

tailwind.config.js

1# tailwind.config.js 2 3module.exports = { 4 mode: "jit", 5 purge: [ 6 "./app/views/**/*.html.erb", 7 "./app/helpers/**/*.rb", 8 "./app/javascript/**/*.js", 9 ], 10 darkMode: false, // or 'media' or 'class' 11 theme: { 12 extend: { 13 height: { 14 400: "400px", 15 }, 16 }, 17 }, 18 variants: { 19 extend: {}, 20 }, 21 plugins: [], 22};

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

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

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

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

関連ファイルの状態

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

application.html.erb

1# application.html.erb 2 3<!DOCTYPE html> 4<html> 5 6<head> 7 <title>Myapp</title> 8 <%= csrf_meta_tags %> 9 <%= csp_meta_tag %> 10 11 <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 12 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 13 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 14</head> 15 16<body> 17 <%= yield %> 18</body> 19 20</html>

app/javascript/stylesheets/application.css

1# app/javascript/stylesheets/application.css 2 3@tailwind base; 4@tailwind components; 5@tailwind utilities;

app/javascript/packs/application.js

1# app/javascript/packs/application.js 2 3// This file is automatically compiled by Webpack, along with any other files 4// present in this directory. You're encouraged to place your actual application logic in 5// a relevant structure within app/javascript and only use these pack files to reference 6// that code so it'll be compiled. 7 8require("@rails/ujs").start(); 9require("turbolinks").start(); 10require("@rails/activestorage").start(); 11require("channels"); 12import "stylesheets/application.css"; 13 14// Uncomment to copy all static images under ../images to the output folder and reference 15// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) 16// or the `imagePath` JavaScript helper below. 17// 18// const images = require.context('../images', true) 19// const imagePath = (name) => images(name, true)

postcss.config.js

1# postcss.config.js 2 3module.exports = { 4 plugins: [ 5 require("tailwindcss"), 6 require("postcss-import"), 7 require("postcss-flexbugs-fixes"), 8 require("postcss-preset-env")({ 9 autoprefixer: { 10 flexbox: "no-2009", 11 }, 12 stage: 3, 13 }), 14 ], 15};

package.json

1# package.json 2 3{ 4 "name": "myapp", 5 "private": true, 6 "dependencies": { 7 "@fullhuman/postcss-purgecss": "4", 8 "@rails/actioncable": "^6.0.0", 9 "@rails/activestorage": "^6.0.0", 10 "@rails/ujs": "^6.0.0", 11 "@rails/webpacker": "5.4.3", 12 "autoprefixer": "10", 13 "postcss": "8", 14 "postcss-loader": "4", 15 "tailwindcss": "2", 16 "turbolinks": "^5.2.0", 17 "vue": "^2.6.14", 18 "vue-loader": "^15.7.0", 19 "vue-template-compiler": "^2.6.12", 20 "webpack": "^4.46.0" 21 }, 22 "version": "0.1.0", 23 "devDependencies": { 24 "webpack-cli": "^3.3.12", 25 "webpack-dev-server": "^3" 26 } 27}

docker

1# docker-compose.yml 2 3version: "3" 4services: 5 webpack: 6 build: . 7 volumes: 8 - .:/myapp 9 - gem_data:/usr/local/bundle 10 environment: 11 NODE_ENV: development 12 RAILS_ENV: development 13 WEBPACKER_DEV_SERVER_HOST: 0.0.0.0 14 command: bash -c "bin/webpack-dev-server" 15 ports: 16 - '3035:3035' 17 db: 18 image: mysql:8.0 19 volumes: 20 - ./tmp/db:/var/lib/mysql 21 environment: 22 MYSQL_ROOT_PASSWORD: password 23 ports: 24 - "4306:3306" 25 web: 26 build: . 27 command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'" 28 volumes: 29 - .:/myapp 30 - gem_data:/usr/local/bundle 31 ports: 32 - "3000:3000" 33 depends_on: 34 - db 35 environment: 36 WEBPACKER_DEV_SERVER_HOST: webpack 37volumes: 38 mysql_data: 39 gem_data:

app/assets/stylesheets/application.css

1# app/assets/stylesheets/application.css 2 3/* 4 * This is a manifest file that'll be compiled into application.css, which will include all the files 5 * listed below. 6 * 7 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's 8 * vendor/assets/stylesheets directory can be referenced here using a relative path. 9 * 10 * You're free to add application-wide styles to this file and they'll appear at the bottom of the 11 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS 12 * files in this directory. Styles in this file should be added after the last require_* statement. 13 * It is generally better to create a new file per style scope. 14 * 15 *= require_tree . 16 *= require_self 17 */

webpacker.yml

1# webpacker.yml 2 3# Note: You must restart bin/webpack-dev-server for changes to take effect 4 5default: &default 6 source_path: app/javascript 7 source_entry_path: packs 8 public_root_path: public 9 public_output_path: packs 10 cache_path: tmp/cache/webpacker 11 webpack_compile_output: true 12 13 # Additional paths webpack should lookup modules 14 # ['app/assets', 'engine/foo/app/assets'] 15 additional_paths: [] 16 17 # Reload manifest.json on all requests so we reload latest compiled packs 18 cache_manifest: false 19 20 # Extract and emit a css file 21 extract_css: false 22 23 static_assets_extensions: 24 - .jpg 25 - .jpeg 26 - .png 27 - .gif 28 - .tiff 29 - .ico 30 - .svg 31 - .eot 32 - .otf 33 - .ttf 34 - .woff 35 - .woff2 36 37 extensions: 38 - .vue 39 - .mjs 40 - .js 41 - .sass 42 - .scss 43 - .css 44 - .module.sass 45 - .module.scss 46 - .module.css 47 - .png 48 - .svg 49 - .gif 50 - .jpeg 51 - .jpg 52 53development: 54 <<: *default 55 compile: true 56 57 # Reference: https://webpack.js.org/configuration/dev-server/ 58 dev_server: 59 https: false 60 host: localhost 61 port: 3035 62 public: localhost:3035 63 hmr: true 64 # Inline should be set to true if using HMR 65 inline: true 66 overlay: true 67 compress: true 68 disable_host_check: true 69 use_local_ip: false 70 quiet: false 71 pretty: false 72 headers: 73 "Access-Control-Allow-Origin": "*" 74 watch_options: 75 ignored: "**/node_modules/**" 76 77test: 78 <<: *default 79 compile: true 80 81 # Compile test packs to a separate directory 82 public_output_path: packs-test 83 84production: 85 <<: *default 86 87 # Production depends on precompilation of packs prior to booting for performance. 88 compile: false 89 90 # Extract and emit a css file 91 extract_css: true 92 93 # Cache manifest.json for performance 94 cache_manifest: true

development.js

1# config/webpack/development.js 2 3process.env.NODE_ENV = process.env.NODE_ENV || "development"; 4 5const environment = require("./environment"); 6 7module.exports = environment.toWebpackConfig();

environment.js

1# config/webpack/environment.js 2 3const { environment } = require("@rails/webpacker"); 4const { VueLoaderPlugin } = require('vue-loader') 5const vue = require('./loaders/vue') 6 7environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin()) 8environment.loaders.prepend('vue', vue) 9module.exports = environment; 10 11function hotfixPostcssLoaderConfig(subloader) { 12 const subloaderName = subloader.loader; 13 if (subloaderName === "postcss-loader") { 14 if (subloader.options.postcssOptions) { 15 console.log( 16 "\x1b[31m%s\x1b[0m", 17 "Remove postcssOptions workaround in config/webpack/environment.js" 18 ); 19 } else { 20 subloader.options.postcssOptions = subloader.options.config; 21 delete subloader.options.config; 22 } 23 } 24} 25 26environment.loaders.keys().forEach((loaderName) => { 27 const loader = environment.loaders.get(loaderName); 28 loader.use.forEach(hotfixPostcssLoaderConfig); 29});

Dockerfile

1# Dockerfile 2 3FROM ruby:2.6.6 4RUN apt-get update -qq && apt-get install -y postgresql-client 5 6# Node.jsをインストール 7RUN curl -sL https://deb.nodesource.com/setup_16.x | bash - && apt-get install -y nodejs 8 9# yarnパッケージ管理ツールをインストール 10RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \ 11 echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \ 12 apt-get update && apt-get install -y yarn 13 14# gem 15RUN mkdir /myapp 16WORKDIR /myapp 17COPY Gemfile /myapp/Gemfile 18COPY Gemfile.lock /myapp/Gemfile.lock 19RUN bundle install 20COPY . /myapp 21 22# Add a script to be executed every time the container starts. 23COPY entrypoint.sh /usr/bin/ 24RUN chmod +x /usr/bin/entrypoint.sh 25ENTRYPOINT ["entrypoint.sh"] 26EXPOSE 3000 27 28# Configure the main process to run when running the image 29CMD ["rails", "server", "-b", "0.0.0.0"]

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問