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

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

伝えたいこと

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

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


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

インストール

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もできるようにならないとな～って思てます。