LaravelにおけるTailwindCSSのベストプラクティス（スタイルを使い回したい場合の話）
Discussion
概要
- Laravel8から、公式の推奨CSSフレームワークがTailwindCSSになっていると認識しています。
- ただ、以下記載のユースケース③の場面において、どう書くのが正解なのか分かりません。
- また、ユースケース①②は現状で自分が考えているベストプラクティスです。こちらにもツッコミあればぜひお願いします。
使用技術
- Laravel10
- Vite
- Vue3
- TailwindCSS3.3
ユースケース
①プロジェクト全体でスタイルを使い回したい場合
- グローバルなCSSファイル(resources/css/app.css)にスタイルをTailwindCSSのスタイルを書く
resources/css/app.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
.btn-custom1 {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
②特定のVueコンポーネント専用のスタイルをそのコンポーネント内で使い回したい場合（コンポーネントの外にスタイルを漏らしたくない）
- Vueコンポーネントの
<style scoped>ブロックに@applyディレクティブを書く
buttons.vue
<template>
<button class="btn-custom2">Button2-1</button>
<button class="btn-custom2">Button2-2</button>
</template>
<style scoped>
.btn-custom2 {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
</style>
③特定のbladeテンプレート専用のスタイルをそのblade内で使い回したい場合（bladeの外にスタイルを漏らしたくない）
- Vueと同じくblade内の
<style scoped>ブロックに@applyディレクティブを書くことで専用のスタイルとしたいが、chat-gpt4に聞いたところこれはできない模様。- chat-gpt4の回答 → @apply ディレクティブは、PostCSSプラグインの一部として機能し、ビルド時にCSSを処理する必要があります。これは、ビルドプロセスを経ていない生のBladeファイルでは機能しません。
- どのように書くのが良いと思いますか？
buttons.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@vite('resources/css/app.css')
</head>
<body>
<button class="btn-custom3">Button3-1</button>
<button class="btn-custom3">Button3-2</button>
</body>
// ↓に書いたTailwindCSSのスタイルはビルドされずスタイリングされない
<style scoped>
.btn-custom3 {
@apply bg-red-500 text-white font-bold py-2 px-4 rounded;
}
</style>
</html>
以上、ご意見をよろしくお願いいたします！
0