Tailwind CSSのv3からv4でテーマ設定の方法がどう変わるか

Tailwind CSS フロントエンドスタイリング

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

2024-12-24

Tailwind CSSで要素間の境界線をスタイリングするときはdivide-*が便利

Tailwind CSS フロントエンドスタイリング CSS

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

2024-12-16

Tailwind CSSでキーボード操作時のフォーカスをスタイリングする方法

Tailwind CSS UXデザインアクセシビリティスタイリングフロントエンド

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

2024-12-05

Tailwind CSSで兄弟要素の状態を評価する方法

Tailwind CSS スタイリングフロントエンド UIデザイン

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

2024-12-02

Tailwind CSSで擬似クラス「:focus-within」をスタイリングする方法

スタイリングフロントエンド UIデザイン Tailwind CSS

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

2024-12-02

Tailwind CSSでアニメーション付きのスケルトンスクリーンをスタイリングする方法

Tailwind CSS スタイリングフロントエンド UXデザイン

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

2024-09-09

Tailwind CSSで連続する要素で交互に適用されるスタイリングをする方法

Tailwind CSS スタイリング CSS

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

2024-09-03

Tailwind CSSでタグのベーススタイルを設定する方法

スタイリング Tailwind CSS フロントエンドマークアップ

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

2024-07-29

Tailwind CSSで文章を行数制限したい場合はline-clamp-*が便利

Tailwind CSS スタイリングフロントエンド UIデザイン

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

2024-07-22

Tailwind CSSでブレイクポイントをカスタマイズする方法

Tailwind CSS スタイリングフロントエンド UIデザイン

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

2024-07-10

Tailwind CSSの@applyを使用してUtility classをまとめた独自Classを定義する方法

Tailwind CSS スタイリングフロントエンド

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

2024-07-01

Tailwind CSSでfont-sizeやline-heightなどの文字の構成要素がまとまったタイポグラフィトークンを定義する

スタイリング Tailwind CSS フロントエンド

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

2024-06-24

pre-commitを使用してgit commit時にPrettierを実行させる

Spring Boot Thymeleaf フロントエンド Tailwind CSS

こんにちは。エキサイトでデザイナーをしている齋藤です。前回、【JetBrains製エディタ対応】PrettierでTailwind CSSのclass名を規則的に自動ソーティングさせると称して、IntelliJ IDEAでファイル保存時にPrettierを自動実行させる方法をご紹介しました。…

2024-06-10

【JetBrains製エディタ対応】PrettierでTailwind CSSのclass名を規則的に自動ソーティングさせる

フロントエンド IntelliJ Thymeleaf Spring Boot Tailwind CSS

こんにちは。エキサイトでデザイナーをしている齋藤です。今回は、Prettierを使用してTailwind CSSのclass名を自動でソーティングさせる方法についてお話をします。 VS Codeを使用した環境での情報は多く出回っていますが、IntelliJ IDEAやWebStormなどのJe…