実現したいこと
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で接続した場合とでサイトの見た目が変わっていました。
(1番目の画像がnpm実行時、2番目の画像がnpm実行なしの見た目です。)
補足
特になし
![guest](/img/icon/icnUserSample.jpg)
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。