こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでデフォルトのテーマを無効にして完全に上書きする方法をご紹介します。 なお、本稿の内容は v4.1.13（2025年9月24日時点の最新版）のTailwind CSSに準じています。 実現した…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSで画像を他の画像に合わせて切り抜く（マスクする）方法をご紹介します。 なお、本稿の内容は v4.1.12（2025年8月18日時点の最新版）のTailwind CSSを前提としています。 実現…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでユーティリティクラスの検知の監視対象から特定のディレクトリを除外する方法をご紹介します。 なお、本稿の内容は v4.1.11（2025年7月22日時点の最新版）のTailwind CSSを前…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、先日弊社で開催されたExciteHD TechCon 2025で発表した、Tailwind CSS、Alpine.js、htmxによる「消しやすさ」を軸にしたフロントエンド戦略についてご紹介します。 ExciteHD TechConについ…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、textarea要素のサイズ変更を提供する方向を制御する方法をご紹介します。 実現したいこと CSSプロパティのresizeで制御が可能 注意点 Tailwind CSSの場合 まとめ 参考文献 実現したいこと …

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでグラデーション背景をスタイリングする方法をご紹介します。 なお、本稿ではv4.1（2025年4月21日時点の最新版）のTailwind CSSを前提とします。 実現したいこと Tailwind CSS…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでスペーシングのベースサイズをカスタマイズする方法をご紹介します。 なお、本稿ではv4.1（2025年4月14日時点の最新版）のTailwind CSSを前提とします。 実現したいこと スペ…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでbackground-sizeとbackground-positionの両方を任意の値で設定する方法をご紹介します。 実現したいこと background-sizeとbackground-positionの両方を任意の値で設定する方…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSに標準搭載されているリセットCSSを無効にする方法をご紹介します。 実現したいこと Preflightを無効にする方法 独自のリセットCSSを設定する まとめ 参考文献 実現したいこと …

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでHTML属性に対する疑似要素のスタイリングをする方法をご紹介します。 実現したいこと Tailwind CSSで擬似クラスを指定する方法 注意点 CSS Tailwind CSS まとめ 参考文献 実…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はTailwind CSSで子孫要素にアクセスする方法をご紹介します。 なぜ子孫要素にアクセスしたいか Tailwind CSSでどう実現するか 対象の小孫要素を限定したい場合 まとめ 参考文献 なぜ子孫要素に…

こんにちは。エキサイトでデザイナーをしている齋藤です。 2025年1月23日にTailwind CSSのv4の安定版がリリースされました。新機能の一つにコンテナークエリーのサポートがあります。 今回はTailwind CSSでコンテナークエリを使用する方法をご紹介します。 …

こんにちは。エキサイトでデザイナーをしている齋藤です。 Tailwind CSSのメンテナーの一人のAdam Wathan氏は、日本時間の1月16日に自身のXにおいて、「Tailwind CSS v4.0安定版は来週リリース予定」と発表しました。 Tailwind CSS v4.0 stable will be out …

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、コンテナークエリーを使用して親要素のサイズに応じたスタイリングをする方法をご紹介します。 コンテナークエリーとは？ コンテナークエリーとは、特定の親要素（コンテナー）のサイズに基…

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ1の23日目を担当します。 qiita.com 今回は、TailwindCSSで要素間の境界線をスタイリングするときはdivide-*が便利というお話をします。 …

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ2の7日目を担当します。 qiita.com 今回は、Tailwind CSSでキーボード操作時のフォーカスをスタイリングする方法をご紹介します。 理想状…

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ2の5日目を担当します。 qiita.com 今回は、Tailwind CSSで兄弟要素の状態を評価してスタイリングする方法をご紹介します。 兄弟要素の状…

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ2の2日目を担当します。 qiita.com 今回は、Tailwind CSSでCSSの擬似クラス:focus-withinをスタイリングする方法をご紹介します。 「:foc…

こんにちは。エキサイトでデザイナーをしている齋藤です。 エキサイトホールディングス Advent Calendar 2024 シリーズ2の1日目を担当します。 qiita.com 今回は、Tailwind CSSでスケルトンスクリーンをスタイリングする方法をご紹介します。 スケルトンスク…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はCSSプロパティの一つであるscroll-behaviorを使用して、ページ内遷移のスクロールを滑らかにする方法をご紹介します。 実現したい挙動 既定の挙動 実現したい挙動 どうやって実現するか Tailw…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はCSSのscroll-snap-typeプロパティを使用して、子要素単位にスクロールさせる方法をご紹介します。 実現したいこと 冒頭、「子要素単位にスクロール」とはどんな状態かをご説明します。 CodePe…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSで連続する要素で交互に適用されるスタイリングをする方法として、odd:＆even: Modifierをご紹介します。 交互に適用されるスタイリングの例 Tailwind CSSで実現する方法 さい…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSでタグのベーススタイルを設定する方法をご紹介します。 実現したいこと @layer baseでベーススタイルを設定できる さいごに 実現したいこと 冒頭、実現したいことを整理します…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、JSを使用せずにCSSだけで「空白のセルがある場合」に限定したスタイリングをする方法をご紹介します。 実現したいこと 完成形 どうやるのか さいごに 実現したいこと 冒頭、実現したい状態…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、HTMLのdata属性を使用してスタイリングする実験をしてみたので、その方法や所感について記したいと思います。 data属性とは？ data属性は、HTMLタグに対して独自の属性を付与できる機能です…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はTailwind CSSを使用しているプロジェクトで、文章を行数制限（超えた部分は3点リーダーで省略）したい場合に使える便利なユーティリティクラス line-clamp-*をご紹介します。 純粋なCSSの場合…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はTailwind CSSでレスポンシブデザイン用のブレイクポイントをカスタマイズする方法をご紹介したいと思います。 はじめに 従来のCSS Tailwind CSSのユーティリティクラスを用いたレスポンシブデ…

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はTailwind CSSの@applyを使用してUtility classをまとめたClassを独自に定義をする方法をご紹介します。 なぜUtility classをまとめたいのか Utility classをまとめた独自Classを定義する方法 …

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSで文字の主な構成要素であるfont-size、font-weight、line-height、letter-spacingをまとめたタイポグラフィトークンを定義する方法についてお話します。 CSSを用いた従来のト…

こんにちは。 エキサイトで内定者アルバイトとしてデザイナーをしている齋藤です。 今回は2023年12月にFirefox（121）が対応したことにより主要ブラウザが完全対応となった、CSSの擬似クラス:has()についてその概要や使用方法についてお話したいと思います。…