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

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

新規登録して質問してみよう
ただいま回答率
85.39%
Cloud9

Cloud9は、クラウドからのプログラミングが可能になるWebサービス。IDEとしての機能が搭載されており、GitHubやHerokuなど他ツールとの連携も可能です。ブラウザ上で動くため、デバイスに関係なく開発環境を準備できます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

tailwindcss

tailwindcssとは、Webサイト・Webアプリケーションを作成するためのCSSフレームワークの一つ。ユーティリティファーストな点が特徴です。汎用的なクラスが多数用意されており、独自のデザインを自由に組み立てることができます。

Q&A

解決済

2回答

241閲覧

Breeze導入後のtailwindの利用について

azureloue

総合スコア1

Cloud9

Cloud9は、クラウドからのプログラミングが可能になるWebサービス。IDEとしての機能が搭載されており、GitHubやHerokuなど他ツールとの連携も可能です。ブラウザ上で動くため、デバイスに関係なく開発環境を準備できます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

tailwindcss

tailwindcssとは、Webサイト・Webアプリケーションを作成するためのCSSフレームワークの一つ。ユーティリティファーストな点が特徴です。汎用的なクラスが多数用意されており、独自のデザインを自由に組み立てることができます。

0グッド

0クリップ

投稿2024/07/14 03:26

実現したいこと

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実行なしの見た目です。)
イメージ説明
イメージ説明

補足

特になし

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

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

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

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

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

guest

回答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
azureloue

総合スコア1

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

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

0

まずCloud9をやめる。入門段階で大きく間違っている。
初心者が書いてる変な記事を参考にするのをやめる。

開発作業は手元のPCで行うのが普通の使い方。
99.9%の情報は普通の使い方を前提にしている。
Cloud9なんて特殊な環境を想定した情報は誰も書いてない。

Cloud9でも正しく動かす方法はあるけど特殊な使い方を覚える価値はないので普通の使い方を覚えたほうがいい。
Cloud9さえやめれば質問してることは解決する。

投稿2024/07/14 07:18

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.39%

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

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

質問する

関連した質問