Tailwind CSSでこう言うときどすればいいのかを解決してみた。
みなさんはTailwind CSSを使ったことがありますか？
例えば、<h1>にcolor: redを適用させたけば<h1 class="text-red-800">のように特定のclassを指定することでStyleを当てていくCSSフレームワークです。
導入方法は下記公式サイトにわかりやすく記載がありますのでそちらをご覧ください。
https://tailwindcss.com
本題
https://tailwindcomponents.com/cheatsheet/
基本はこのサイトに書いてあるクラスを指定すればいいのですが、この中に無いものを指定したい時はどうすればいいかと言うのが本題です。
固定値
例えば<div>に width: 165pxを指定したくてもどこにもありません。
ではこう言う時はどうすればいいのでしょうか？[]で固定値を指定する。
つまり、この場合で言うと下記のように指定します。
<div class="w-[165px]"></div>calc()計算
Tailwind CSSでもcalc()も使えます。
<div class="h-[calc(100vh_-_80px)]"></div>
ミソは空白に_を入れること。
「Tailwind CSSでは空白には_を入れなければなりません。」
自分はそれを知らなくていつまで経ってもできませんでしたw
Google Fonts
font-familyもあります。
では、どのようにして上記以外のフォントを使えば良いのでしょうか？
その方法をこの章ではお伝えします。
今回はBad Scriptというフォントを使用してみます。
https://fonts.google.com/specimen/Bad+Script?query=bad
上記のサイトにアクセスし、下記を記述したファイルに@importを追加します。
@tailwind base;
@tailwind components;
@tailwind utilities;
次のステップです。
tailwind.config.jsを下記のように編集します。
module.exports = {
theme: {
extend: {
// フォントを追加
fontFamily: {
badScript: ["Bad Script", "cursive"],
},
// ...これで準備完了です。
ではこのフォントを実際に使ってみます。
<h1 class="font-badScript">TITLE</h1>カスタムプロパティ
Tailwind CSS側が用意していないプロパティは自分で作成することができます。
例えば、文字列が2行を超えると・・・にするプロパティを作成します。
先ほどの
@tailwind base;
@tailwind components;
@tailwind utilities;にとある構文を追加すれば、自分でプロパティを作成できます。
@layer utilities {
.webkit-line-clamp {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}<p class="webkit-line-clamp">hogehogehoge・・・・・・・・・・・・・・・</p>レスポンシブ
Tailwind CSSでは下記のブレークポイントは用意されています。(モバイルファースト)
今回は自分でブレイクポイントを作ります。
作り方はtailwind.config.jsを下記のように記載しブレークポイントを作成します。
module.exports = {
theme: {
screens: {
// --------------------------------------------------
// custom settings
// --------------------------------------------------
maxsp: { max: "７６８px" },
sptb: { min: "769px", max: "1279px" },
maxpc: {max: "1280"},
// --------------------------------------------------
// -----------------------------------
// tailwind default
// --------------------------------------------------
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
},
// ...<div class="w-80 maxsp:w-full">BOX</div>
div {
width: 320px;
}
@media screen and (max-width:768px) {
div {
width: 100%;
}
}
Tailwind CSSで用意されているレスポンシブはモバイルファーストです。
自分はモバイルファーストのレスポンシブに慣れていないので今回PCファーストに書き換えました。
この機会にモバイルファーストのレスポンシブに慣れていかないとなぁw
以上が個人的に「この場合Tailwind CSSでどのように書けばいい」でした。
参考記事
- https://www.ibulog.com/posts/2021/08/tailwind-fixed-value
- https://qiita.com/dtakkiy/items/dd161e2646695b387277
追記(2023-04-30)
ダークモード
Tailwind CSSでダークモードを実装すればいいのでしょうか？
tailwind.config.jsの設定
Tailwind CSS でダークモードを有効化するためには、tailwind.config.js ファイルを修正します。
module.exports = {
// 省略
darkMode: // 'media' or 'class'
}- media
media を指定した場合には、OS の設定に基づいてダークモードを適用するかどうか決定します。ただし、手動でダークモードとライトモードを切り替えることができません。
これにより、OS のダークモードの設定値はprefers-color-schemeによって取得されます。
- class
classを指定した場合、ユーザーによって手動でダークモードを切り替えられるようにするために指定します。設定すると、自身のルート要素に対して .darkクラスが付与されてます。付与される場合のみダークモードが適用されるという事になります。
<html class="dark">
<body>
<!-- ... -->
</body>
</html>また、.darkクラスを付与するかしないかはJavaScriptのお力になります。
<label class="relative inline-flex items-center cursor-pointer">
<input id="checkbox" type="checkbox" value="" class="sr-only peer">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Toggle me</span>
</label>
<script>
const element = document.querySelector("#checkbox");
element.addEventListener("change", myfunc);
function myfunc() {
if (element.checked) {
document.documentElement.classList.add('dark')
localStorage.theme = 'dark'
} else {
document.documentElement.classList.remove('dark')
localStorage.theme = 'light'
}
}
</script>HTMLのスイッチの箇所は下記リンクのサンプルコードから拝借してきました。
https://flowbite.com/docs/forms/toggle/
では、最後に現在の状態がダークモードなのかを判別させるコードです。
公式サイトにいい感じのコードがありましたのでこちらも拝借です。
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
// Whenever the user explicitly chooses light mode
localStorage.theme = 'light'
// Whenever the user explicitly chooses dark mode
localStorage.theme = 'dark'
// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem('theme')https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually
ローカルストレージの theme の値を確認し、値が dark であった場合には、<html> タグに .darkクラスを付与します。
ローカルストレージに値が存在しない場合、window.matchMedia('(prefers-color-scheme: dark)').matches によって OS のダークモードの設定を確認します。
ダークモード時のスタイル
<section class="h-screen flex justufy-center items-center bg-gray-100 dark:bg-gray-800">
<h1 class="text-3xl text-gray-800 dark:text-gray-100">こんにちは</h1>
</section>このようにdark:を指定してダークモード時のスタイルを指定します。
追記(2022-05-20)
!important
以下のものTailwind CSSで実装したいときどうすればいいのか？
position: relative !important;この!importantってどうすんねん？下記のようにすればいい。
!relative!を頭につけるだけでした。
