TailwindCSSでコンポーネントを作成するときに意識していること
1. ComponentPropsを使う 多くの人が述べていますが、拡張性を高めるためにReact.ComponentPropsを使います。 import { ComponentProps, FC } from 'react' type ButtonProps = { loading: boolean } & ComponentProps<'button'> export const Button: FC<ButtonProps> = ({ loading, children, ...props }) => { return <button {...props}>{loading ? children : 'Loading...'}</button> } このようにすると、ページで用いるときにデフォルトのボタンと同じような使用感で用いることができます。 2. tailwind-mergeを
Adding Tailwind CSS To New And Existing WordPress Themes | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! In the 15 or so years since I started making WordPress websites, nothing has had more of an impact on my productivity — and my ability to enjoy front-end development — than adding Tailwind CSS to my workflow (and it isn’t close). When I began working with Tailwind, there was an up-to-date, f
TailwindにContainer Queriesがやってきた
<div class="flex flex-col gap-4 p-4"> <div class="@container w-[200px]"> <div class="border bg-blue-50 border-blue-300 @[300px]:bg-red-50 @[300px]:border-red-300 p-8"> Sample </div> </div> <div class="@container w-[400px]"> <div class="border bg-blue-50 border-blue-300 @[300px]:bg-red-50 @[300px]:border-red-300 p-8"> Sample </div> </div> </div>
Tailwind CSSのベストプラクティス
概要 今回はTailwind CSSにおけるスタイリングのベストプラクティスについてまとめました。 ベストプラクティスにあたっては、tailwindlabsのCommunity ManageをされているSophiaさんのTipsを基にしております。 また、本記事はTailwind CSS自体の説明は割愛しているため、Tailwind CSS自体を学びたい場合は、こちらをオススメいたします。 Tailwind CSSのベストプラクティス ユーティリティクラス 複数のユーティリティクラスを使用する場合は、その文字列の順番に意味を持たせます。 Concentric CSSのアプローチを使うのが良さそうです。 Concentric CSSでは、プロパティをアルファベット順とかにするのではなくて、それぞれのプロパティの役割ごとに並び替えます。 下記はConcentric CSSで並び替えたcssの例
Tailwind CSS で子孫セレクタなどを指定できる arbitrary variants
こんにちは森田です。 今回は Tailwind CSS v3.1 で実装された子孫セレクタを指定できる新機能 「arbitrary variants」 の紹介します。 arbitrary variantsarbitrary variants はセレクター修飾子を class に直接記述し親セレクタから子または子孫セレクタを指定する機能です。 Handling Hover, Focus, and Other States – Using arbitrary variants Tailwind CSS v3 より下記のコードのような任意の値を指定できる arbitrary value という機能はありました。
Just-in-Time Mode - Tailwind CSS
This feature is currently in preview. Preview features are not covered by semantic versioning and some details may change as we continue to refine them. Tailwind CSS v2.1 introduces a new just-in-time compiler for Tailwind CSS that generates your styles on-demand as you author your templates instead of generating everything in advance at initial build time. This comes with a lot of advantages: Lig
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Typewind – Typesafe Tailwind
TailPress - Rapidly build your WordPress theme with Tailwind CSS
Tailwind: The Base, the Components and the Utilities
Tailwind REM Converter
tailwind.config.jsで型補完を効かせる