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

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

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

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

tailwindcss

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

Q&A

解決済

1回答

1420閲覧

tailwind でモーダルが動かない

atsupoooon

総合スコア47

Laravel

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

tailwindcss

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

0グッド

0クリップ

投稿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を何度か試しましたが、ダメでした。。。

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

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

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

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

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

guest

回答1

0

ベストアンサー

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

足りないのはalpine.js

投稿2022/11/19 21:45

kawax

総合スコア10377

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.45%

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

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

質問する

関連した質問