Laravel8でTailwindを使う準備をやってみた。

はい、今回はLaravel8系でTailwindを使えるように設定しました。

伝えたいこと

今回は手順に沿っていけば、TailwindをLaravelで使えるようになります。

簡単な手順書となっています。


今回はすでにLaravel8はインストールしているという状況を想定して行います。

インストール

Nodeをインストール

前提としてnodejsを以下サイトよりインストールしておいてください。

インストールができていたら、以下コマンドでバージョンが確認できると思います。

node -v

Tailwindのインストール

では、npmを使ってTailwindをインストールしていきます。

ちなみにnpmとはNode Package Managereの略で、Node.jsのパッケージを管理するツールです。

npm install npm install -D tailwindcss npx tailwindcss init

これでインストールは完了したので、必要ファイルの編集を行っていきましょう!

必要なファイルを編集

ファイルの編集

作成された以下ファイルの編集

プロジェクト名/resources/views/vendor/pagination/tailwind.config.js

module.exports = { purge: [ './storage/framework/views/*.php', './resources/**/*.blade.php', './resources/**/*.js', './resources/**/*.vue', ], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }
Code language: JavaScript (javascript)

resources/css/app.cssの編集

@tailwind base; @tailwind components; @tailwind utilities;
Code language: CSS (css)

プロジェクト名/webpack.mix.jsの編集

const mix = require('laravel-mix'); /* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel applications. By default, we are compiling the CSS | file for the application as well as bundling up all the JS files. | */ mix.js('resources/js/app.js', 'public/js').autoload( { "jquery": [ '$', 'window.jQuery' ], } ).postCss('resources/css/app.css', 'public/css', [ require('postcss-import'), require('tailwindcss'), require('autoprefixer'), ]);
Code language: JavaScript (javascript)

Tailwindを使えるようにタグの追加

Tailwindを利用したいhtmlファイルに以下のlinkタグを入れましょう。

<link href="/css/app.css" rel="stylesheet">
Code language: HTML, XML (xml)

npm run dev

これで後は以下コマンドを叩くとOKです!

npm run dev

できた!

まとめ

Tailwindもできるようにならないとな~って思てます。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA