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

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

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

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

tailwindcss

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

Q&A

解決済

tailwind でモーダルが動かない

atsupoooon
atsupoooon

総合スコア47

Laravel

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

tailwindcss

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

1回答

0グッド

0クリップ

252閲覧

投稿2022/11/19 13:15

前提

laravel8の環境にtailwindをインストールして管理画面の実装をしていたのですが、cssは問題なく効いており、反映されるのですが、
modalが公式のコンポーネントをそのままコピーしても反映がされなくお教えいただきたいです。
※jsの部分だけ何故か反映されなく。。。

実現したいこと

モーダルの動作その他jsで動かしている部分が反映できればと思います。

設定関係

webpack

1mix.js('resources/js/app.js', 'public/js') 2 .sass('resources/scss/app.scss', 'public/css') 3 .options({ // 以下追加行 4 processCssUrls: false, 5 postCss: [ tailwindcss('./tailwind.config.js') ], //webpack.jsからみた相対パス 6 }); 7

layout/app.blade.php

1<link rel="stylesheet" href="{{ mix('css/app.css') }}"> 2<script src="{{ mix('js/app.js') }}" defer></script> 3

tailwind.config.js

1const defaultTheme = require('tailwindcss/defaultTheme'); 2 3/** @type {import('tailwindcss').Config} */ 4module.exports = { 5 mode: 'jit', 6 content: [ 7 './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php', 8 './storage/framework/views/*.php', 9 './resources/views/**/*.blade.php', 10 './resources/views/*.blade.php', 11 ], 12 13 theme: { 14 extend: { 15 fontFamily: { 16 sans: ['Nunito', ...defaultTheme.fontFamily.sans], 17 }, 18 }, 19 }, 20 21 plugins: [require('@tailwindcss/forms')], 22};

試したこと

キャッシュなどを削除してnpm run dev と watchを何度か試しましたが、ダメでした。。。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

「公式のmodal」はいくつもあるのでどれを使ったか書かないと他人には何も分からない。
スターターキットは新しく作った直後のプロジェクトにインストールするものなのでファイル一つだけコピーしても動かない。

足りないのはalpine.js

投稿2022/11/19 21:45

kawax

総合スコア10020

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Laravel

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

tailwindcss

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