Q&A実現したいこと
tailwindで画面のデザインを行う。
発生している問題・分からないこと
▼環境
AWS Cloud9
PHP 8.2.20
Laravel 9.52.16
MySQL Ver 15.1 Distrib 10.5.23-MariaDB, for Linux (x86_64)
▼現在の状況
観光地を投稿できる掲示板のようなサイトを作成しています。
データベースは構築済みで、モデル、コントローラー、ビューファイルも一通り設定済みです。
ウェブサイト自体は表示されます。また、Breezeも導入しており、認証機能も付いています。
しかし、Breezeを導入した際に一緒に導入されたtailwindを使った画面のデザインを行おうとしたところ、全く表示されない状況です。
サイトに接続する際はphp artisan serve --port=8080のコマンドを利用しています。
npm run devコマンドはうまく実行できています。
該当のソースコード
▼/travel/tailwind.config.js module.exports = { content: [ "./resources/**/*.blade.php", "./resources/**/*.js", "./resources/**/*.vue", ],
▼/travel/resources/css/app.css @tailwind base; @tailwind components; @tailwind utilities;
▼/travel/resources/views/spots/index.blade.php <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <title>Landmarker</title> <!-- Fonts --> <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet"> <link href="{{ asset('css/style.css') }}" rel="stylesheet"> @vite('resources/css/app.css') </head> <x-app-layout> <x-slot name="header"> Top </x-slot> <body> <div class="flex-none w-14"> <a href="/spots"><h2 class='spots'>スポット一覧</h2></a> </div> <h2 class='countries'>国で探す</h2> @foreach ($areas as $area) <h5 class='area'>{{$area->name}}</h5> <p> @foreach($area->countries as $country) <a href="/countries/{{$country->id}}"> <h5 class='country'>{{$country->name}} </a> @endforeach </p> @endforeach <h2 class='objective'>目的で探す</h2> @foreach ($tags as $tag) <a href="/tags/{{$tag->id}}"><h5 class='tag'>{{$tag->name}}</h5></a> @endforeach </body> </x-app-layout> </html>
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
こちらのサイトを参考に設定しました。https://b-risk.jp/blog/2022/08/laravel/
リンク先のサイトでは、この後ビューファイルを編集して、スタイルが反映されていっているのですが、自身のビューファイルに書き込んでも全く見た目が変わりません...。
また、npm run devを実行したままphp artisan serve --port=8080で接続した場合と、npmは実行せずphp artisanで接続した場合とでサイトの見た目が変わっていました。
（１番目の画像がnpm実行時、２番目の画像がnpm実行なしの見た目です。）
補足
特になし
回答2件
0
自己解決
▼結論
ターミナルでnpm run buildを実行したら反映されました。
▼変更前のコード
index.blade.php
1<p class='allspots'>View all the spots ≫ </p>
index.css
1.allspots{ 2 font-size: 20px; 3 padding : 10px; 4 margin : 10px; 5 text-align:right 6}
▼変更後のコード
index.blade.php
1<p class='text-orange-500 text-right'>View all the spots ≫ </p>
npm run buildを実行
↓"View all the spots>>"の色が変更されています。
投稿2024/07/19 13:32
編集2024/07/19 13:36
総合スコア1
0
まずCloud9をやめる。入門段階で大きく間違っている。
初心者が書いてる変な記事を参考にするのをやめる。
開発作業は手元のPCで行うのが普通の使い方。
99.9%の情報は普通の使い方を前提にしている。
Cloud9なんて特殊な環境を想定した情報は誰も書いてない。
Cloud9でも正しく動かす方法はあるけど特殊な使い方を覚える価値はないので普通の使い方を覚えたほうがいい。
Cloud9さえやめれば質問してることは解決する。
投稿2024/07/14 07:18
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。