はじめに
自分でページを作成してく中で、知らぬ間に自分自身でいつ入れたのかわからなくなってしまったコードや、設定をそもそも間違えていたのか、原因がはっきりとしないけど無事解決したかな？というお話。
今回は背景色についてやっと私が正常だと思う状態になったので、一連の流れをまとめてみます。
環境
- Windows, WSL
- Docker
- Ruby 3.2.3
- Rails 7.1.3
背景色を真っ白にしたい！
rails newをして、初めてトップページを作成したとき、背景色が次のような状態になっていました。あわい黒？
当時はとりあえずそのままにして作成してきましたが、改めて背景色を真っ白にしたいと思いました。
1：はじめに試したこと
・tailwind.config.js にカスタムカラー設定を追加して、背景色を白色に変更する方法を行ってみました
（ theme～pluginsの前までの｝のコードを追加）
module.exports = {
content: [
'./app/views/**/*.html.erb',
'./app/helpers/**/*.rb',
'./app/assets/stylesheets/**/*.css',
'./app/javascript/**/*.js'
],
theme: {
extend: {
colors: {
'custom-white': '#ffffff', // 白色を追加
},
},
},
plugins: [require("daisyui")],
};
そしてコンテナに入りnpm run build:cssでビルド再実行しましたが、背景色は改善されず😢
2：もう少し調べて、試してみる
app/views/layouts/application.html.erbファイルでbodyクラスがどうなっているか確認してみると・・・
<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
省略
</head>
<body class="min-h-screen bg-natural relative font-main">
このbodyクラスがナチュラルを変更することで改善が期待できる。という事で次のように変更しました
<body class="min-h-screen bg-white relative font-main">
whiteに変えることで背景色が白に！無事解決。
さいごに
背景色がおかしいとき、どこを見に行けばいいのかを知ることができました。
ナチュラルは当然白という謎の思考が「ここを修正してみても意味ないでしょ」という状態に。
実際に修正してみて、初めて気づくことが多いなとかんじています。
今回の記事が何か参考になれば幸いです。