WEB開発

初心者でもできるやさしいLaravel入門 Part.3 Tailwindを使ってみよう(laravel 8.x対応)

前回もみてね

今回はLaravelでも簡単に利用できるTailwindを利用する設定をしましょう。

インストール

Nodeをインストールする

次のサイトからnodejsをＰＣにインストールして下さい。

https://nodejs.org/en/download/

ターミナル（コマンドプロンプト）で

node -v

と入力して何か出てきたら成功です。

Tailwindをインストールする

先ほどインストールしたnpmを使ってTailwindをインストールしましょう。

ターミナル（コマンドプロンプト）で以下のように入力して実行してください。

npm install
npm install -D tailwindcss
npx tailwindcss init

このコマンドによって、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: [],
}

次にresources/css/app.cssを編集します。

@tailwind base;
@tailwind components;
@tailwind utilities;

次に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')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ]);

ここまで出来たらTailwindを利用したいページのphpファイルのhead要素を以下のようにしておきます。

<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />         
        <link href="/css/app.css" rel="stylesheet">
    </head>
<!-- ... -->
</html>

あとはターミナル（コマンドプロンプト）で

npm run dev

を実行すると使えるようになります。

独自Classを作る

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss"),
    ])
@tailwind base;
@tailwind components;

.btn {
    @apply block bg-red-500;
}
.btn:hover {
    @apply bg-blue-500;
}
@screen md {
    .btn {
    @apply inline-block;
    }
}

@tailwind utilities;
npm run dev

VisualStudio Codeのおすすめプラグイン

・Tailwind CSS IntelliSense

45万以上のインストール実績あり。実際便利

-WEB開発