LaravelでTailwind CSSを使ってみた
laravel8ではbootstrapではなく tailwind cssが標準になったとのことで、使ってみました。
めちゃくちゃ良いですね、設定ファイルに設定して、それを全体共通で使用できるのがとても便利でした。
tailwind cssを使うまでの準備
tailwind cssが使えるようになるまでの準備をしていきます
Tailwind CSSをインストールする
npm install tailwindcss --save-dev
もともと入っている方は入れる必要ないかと思いますが、僕の場合はインストールする必要がありました。
configファイルを作成する
tailwind cssの設定ファイルを作成します。
$ ./node_modules/.bin/tailwind init
Created Tailwind CSS config file: tailwind.config.js
出力されたファイル（tailwind.config.js）はこんな感じです
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
ここに、全体の共通のスタイルの設定とかを書いていくみたいです！！
app.scssでtailwind cssをインポート
// Tailwond CSS
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
webpack.mix.jsを下記のように変更します
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
});
configファイルにプロジェクトで使用する「色」を設定してみた
tailwind.config.js にプロジェクトごとの設定をバシバシ書いていくと超便利になります
今回は色を試してみました。
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
colors: {
main: {
light: '#D0FBF8',
DEFAULT: '#15ebde'
},
gray: {
light: '#999999',
DEFAULT: '#999999'
},
black: {
DEFAULT: '#555555'
},
orange: {
DEFAULT: '#FF6347'
}
},
extend: {
},
},
variants: {
extend: {},
},
plugins: [],
}
この設定をすることで、 「.bg-main」や「.bg-main-light」「.text-main」「.text-main-light」などのクラスが使えるようになります。
色が本当に変わるのか確認してみます。
text-main というクラスをいれると、 文字色が #15ebde になるはずなのですが...
<div class="h-full flex justify-center items-center text-main">テストテキスト</div>
文字色が #15ebde になってます！すごい！
次に、 text-main-light を指定して、文字色が #D0FBF8 になるか確認してみます。
<div class="h-full flex justify-center items-center text-main-light">テストテキスト</div>
文字色が変わりましたねー。 #D0FBF8 になりました。
設定ファイルに使用する色を全部書いておいて、それに基づいてクラスが自動生成されるのはすごく良いですね。
ではバックグラウンドカラーも試してみます^^
bg-main というクラスを付与したら背景色が #15ebde になるはずです
<div class="h-full flex justify-center items-center bg-main">テストテキスト</div>
変わりましたね！
laravelだと _variable.scss に定数をいれたりしていましたが、 tailwind cssを使用するならこっちにまとめちゃってもいいかもしれないですね。
hoverなどのアクション時はどうすれば？
hoverなどのアクションを tailwind cssでは variants と呼んでるみたいです。
例として hoverのときに opacityを0.7にするというのを tailwind cssで実装してみたいと思います。
まずは設定ファイルで hover時に opacityを変更するのを許容する設定を書きます
module.exports = {
theme: {
variants: {
opacity: ['hover'] // hover時のopacityを許可する
}
},
}
そしてクラスはこのように書きます hover:opacity-70
これだけでhover時に opacityが0.7になります。めっちゃかんたん〜！
pugとかのテンプレートエンジンを使うならvariantsの「:」を使えないので、「:」という装飾子が使えないので、それの代わりになるものを設定できるみたいです。
module.exports = {
separator: '_',
theme: {
variants: {
opacity: ['hover'] // hover時のopacityを許可する
}
},
}
こうすると、pugでは .hover_opacity-70 のように書くことができます。
これでpugなどのほかのテンプレートエンジンでも差し支えなく使用できますね。
tailwind cssを使用して自分なりのCSSクラスを作る(@apply)
@applyを使って、何回も出てくる同じ記述をまとめることもできます
<div class="hover_opacity-70 cursor-pointer no-underline">クリックできる要素</div>
これをcssでカスタムクラスを作るとこのようになります。
.clickable {
@apply hover_opacity-70 cursor-pointer no-underline
}
↓作成したカスタムクラスを適用します
<div class="clickable">クリックできる要素</div>
僕はこのclickableを今後愛用しそうです（笑）
他にも僕がよく使いまわしてるなーって思う記述は, flex系（display: flex, align-items: center, justify-content: space-between） とか
こういうのは自分のクラスを使って一つにまとめるのは良いかなーと思います。
VSCodeでtailwind css使うなら拡張機能使わないと損だぜ！
tailwind cssのvscode拡張機能が優秀すぎました。なんでも補完してくれるんだもの。
自分でconfigファイルに設定したものも補完してくれるんですよ、すごすぎませんか。
VSCodeで拡張機能をいれる
vscodeのsetting.jsonに下記を記述します
"tailwindCSS.includeLanguages": {
"plaintext": "vue"
},
"tailwindCSS.emmetCompletions": true
補完してくれることを確認する
marginのpxも教えてくれるなんて...
スクショ取り忘れましたが、自分で指定した色とかも補完してくれます bg-main とか text-gray-light とかとか。最強すぎます。
終わりに
Tailwind CSS結構気に入ったのでしばらく愛用しそうです。
VSCodeの拡張機能もとても便利だし、設定がまとめられるのは嬉しいですね。
気になった方はすぐさま使ってみてください！
Discussion