2021.06.16LaravelでTailwindCSSを使う方法と実際に導入して、動作確認してみました。7ステップで設定は完了します。簡単に使い始めることができるので確認してみてください。導入方法についてはTailwindCSS公式サイトの下記に書いています。Laravel「Laravel」の記事一覧です。tailwindcss.com目次npmでTailwindCSSをダウンロードするnpxコマンドでTailwindCSSの設定ファイルを作成するTailwindCSSの設定ファイル(tailwind.config.js)を編集するLaravelMixを修正するCSSファイルを修正してTailwindCSSを読み込むBladeファイルにCSSを読むように設定しておくビルドするビルドが通らない動作確認する終わりにnpmでTailwindCSSをダウンロードするLaravelで作成したプロジェクトで下記のコマンドを実行して、フロントエンド周りのライブラリをインストールしておきます。installTailwindCSS関連のライブラリをダウンロードします。autoprefixer@latestnpxコマンドでTailwindCSSの設定ファイルを作成するnpxコマンドを使用して設定ファイルを作成します。initTailwindCSSの設定ファイル(tailwind.config.js)を編集するプロジェクトの配下にtailwind.config.jsという設定ファイルができているので、purgeの項目を下記のように変更します。purgeにはTailwindCSSのスタイルを参照するファイルを全て含む必要があります。[],}LaravelMixを修正するプロジェクト直下にあるwebpack.mix.jsを下記のように修正します。devにて、webpackをビルドしたときにTailwindCSSが含まれるようになります。CSSファイルを修正してTailwindCSSを読み込むresources/css/app.cssファイルを下記のように修正します。utilities;BladeファイルにCSSを読むように設定しておくあとは読み込むBladeファイルで、webpackで出力してくれるcssを読み込むようにします。</body></html>TailwindCSSが効いているか確認するために、下記のボタンを表示する画面のどこかに仕込んで置きましょう。---></body>ボタンに設定しているクラス(bg-blue-500やcursor-pointerなど)がTailwindCSSで定義されているクラスになります。ビルドするwebpackをビルドします。devビルドすると、下記のようにファイルが出力されたことが確認できます。/js/appビルドが通らない下記のようなエラーが出てビルドが通らない場合があります。8.公式のこの辺に書いていますが、PostCSS8に依存しているらしいのですが、互換性(?)の問題でエラーが出ることがあるみたいです。下記のコマンドで一度削除して、互換性のあるものをダウンロードして使うようにすることでビルドが通るようになります。autoprefixer@^9動作確認するサーバーを起動したら、ページが表示されるURLにアクセスして画面を確認します。追加したボタンがこのように表示されていれば、設定完了です。終わりに今回はTailwindCSSをLaravelに導入してみました。TailwindCSSで定義されているクラスは公式のサイトに書いていますので、参照しながら使っていくと良いかと思います。framework.tailwindcss.com独学に限界を感じたら、オンラインで学んでみよう!本当にわからない場合は、知っている人に聞くと近道になります。・PHP/Laravelのおすすめプログラミングスクール5選!PHP/Laravelのおすすめプログラミングスクール5選!PHPやLaravelが学べるプログラミングスクールを5つ選んで比較してみました。総合的にみると、Freeksがサブスク型で始められて、就職支援まで行ってくれるので良さそうでした!PHP/Laravelが学べるプログラミングスクール5選ゲス...codelikes.com2022.10.15LaravelTailwindCSSプログラミングシェアするTwitterFacebookはてブPocketLINEコピーyasuakiをフォローするyasuakiコードライクPythonPythonのバージョンを確認する3つの方法!Pythonのバージョンを確認する方法について書いています。バージョンを確認するには、下記の3つの方法があります。stashの使い方について書いています。stashについて解説して、その後に実際にコマンドを使用してどうなるのかなど、詳細に書いてみました。最後に紹介したコマンドを見やすいように表にまとめてみました。G...PHPPHPでファイルの存在を確認する2つの方法!(is_file)PHPで「指定したパスのファイル」が存在しているか確認する方法について書いています。下記の2つの関数を使って、ファイルパスが存在するか確認することができます。・is_file関数・file_exists関数載せているサンプルコードについては...swiftSwiftで数値から文字列に変換する2つの方法!Swiftで数値から文字列に変換する方法について書いています。数値から文字列に変換するにはStringを使うか、文字列に埋め込むことで変換可能です。サンプルコードは、Swiftバージョン5.7で検証しています。Stringを使って数値から文...JavaScriptJavaScriptで配列を結合する方法3選!JavaScriptで、配列を結合する方法について書いています。下記のメソッドや構文を使うことで、配列を結合することが可能です。・スプレッド構文・concatメソッド・pushメソッドそれぞれについて、次項から詳しくみていきます。スプレッド...JavaScriptJavaScriptのオプショナルチェーン演算子の使い方!JavaScriptのオプショナルチェーンの使い方について書いています。オプショナルチェーンはプロパティに.?をつけてアクセスする演算子です。サンプルコードをいくつか用意して、挙動を確認してみました。最小値取得のサンプルコード5選!Pythonのmin関数の使い方について書いています。min関数を使うことで、渡した値やイテラブルのデータから最小値を見つけることができます。最初にmin関数の使い方について解説して、次にいろいろなデータ型を渡したサンプルコードを紹介してい...Vue.js【現役エンジニアが選定】Vue.jsの学習におすすめの本4選!今回はVue.jsの学習におすすめな本を4つ紹介しています。学習に本が必要かも考えてみたので確認してみてください。コメントをキャンセルメールアドレスが公開されることはありません。名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Δプロフィールyasuaki福岡でフリーランスをやってます。業界歴13年になりました、SESで働くことがほとんどです。なんでもやってますが、Webが得意です。このブログではプログラミング技術の内容を中心に、たまに商品レビューとかを書いています。目次npmでTailwindCSSをダウンロードするnpxコマンドでTailwindCSSの設定ファイルを作成するTailwindCSSの設定ファイル(tailwind.config.js)を編集するLaravelMixを修正するCSSファイルを修正してTailwindCSSを読み込むBladeファイルにCSSを読むように設定しておくビルドするビルドが通らない動作確認する終わりにPHP/Laravelの学習におすすめの本を選定!・PHPの学習におすすめの本6選!【現役エンジニアが選定】PHPの学習におすすめの本6選!PHPの学習におすすめの本を6つ紹介しています。Laravel・CakePHP・SymfonyなどのWebフレームワークやWordPressなどに使われているPHP。フレームワークの内部のコードや、使用されているシステムのコードを理解するた...codelikes.com2022.08.04・Laravelの学習におすすめの本3選!【現役エンジニアが選定】Laravelの学習におすすめの本3選!(本が必要?)今回はLaravelの学習にオススメの本を3つ紹介しています。学習するにあたって本が必要か考えてみました。Techpit前半はPHPのみでEvernote風メモアプリケーションを開発し、後半は同じものをLaravelで開発する。フレームワークを使用しない場合の開発と、Laravelのメリットを実際に開発することで体感。開発を通じて、簡単なアプリケーションの作り方やSQLの書き方、dockerの使用方法などを学ぶ。商品レビューゲーム食レポお問い合わせホーム検索トップサイドバータイトルとURLをコピーしました。