Repolode
投稿する
tailwindlabs

tailwindlabs/tailwindcss

HTMLやJSXに単一目的の小さなクラスを直接記述して、独自のUIを構築できるユーティリティファーストのCSSフレームワーク。

GitHub で見る公式サイト
スター
97,945
フォーク
8,392
未解決の Issue
90
最終コミット
一昨日

これは何？

Tailwind CSSは、ユーティリティファーストのCSSフレームワークです。意味的なクラス名を付けた独自のスタイルシートを書く代わりに、flex、pt-4、text-centerのような単一目的の小さなユーティリティクラスをマークアップに直接適用して、スタイルを組み立てます。

このフレームワークはPostCSSプラグインとして提供されており、通常はnpmでインストールします。プロジェクトで実際に使用されているCSSだけを生成するため、HTMLファイルを離れることなく、独自のインターフェースをすばやく構築できます。レスポンシブ用のバリアントや、hoverやfocusなどの状態バリアント、ダークモードは、クラスのプレフィックスで表現します。

プロジェクトはTypeScriptで書かれており、Tailwind Labsがメンテナンスしています。ドキュメントはtailwindcss.comで公開されており、質問や機能に関する議論はGitHub Discussionsで行われています。

主な機能

  • 01レイアウト、余白、タイポグラフィ、色などを設定する低レベルのユーティリティクラスを提供します。
  • 02プロジェクトで使用されているCSSだけを生成します。
  • 03クラスのプレフィックスを使って、レスポンシブブレークポイントやhover、focusなどの状態バリアントに対応します。
  • 04npmからインストールできるPostCSSプラグインとして提供されています。
  • 05クラスベースのバリアントでダークモードに対応します。

ユースケース

  • 別個のスタイルシートを書かずに、独自のコンポーネントデザインを構築する。
  • HTMLやJSXのテンプレート上で、レイアウトのプロトタイプを作成しながら調整する。
  • 一貫した余白やタイポグラフィのスケールを備えたレスポンシブサイトを作成する。

クイックスタート

  1. 1

    インストール手順については、tailwindcss.com のドキュメント全体を確認してください

トピック

#css#css-framework#utility-classes#postcss#responsive-design#frontend#functional-css#responsive#tailwindcss

よくある質問

tailwindcss とは？
HTMLやJSXに単一目的の小さなクラスを直接記述して、独自のUIを構築できるユーティリティファーストのCSSフレームワーク。 Tailwind CSSは、ユーティリティファーストのCSSフレームワークです。意味的なクラス名を付けた独自のスタイルシートを書く代わりに、flex、pt-4、text-centerのような単一目的の小さなユーティリティクラスをマークアップに直接適用して、スタイルを組み立てます。
tailwindcss は無料で使えますか？ライセンスは？
tailwindcss は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
tailwindcss は今もメンテナンスされていますか？
活発にメンテナンス中。tailwindcss の最終コミットは 2026年10月19日 です。
tailwindcss は何に使えますか？
別個のスタイルシートを書かずに、独自のコンポーネントデザインを構築する。 HTMLやJSXのテンプレート上で、レイアウトのプロトタイプを作成しながら調整する。 一貫した余白やタイポグラフィのスケールを備えたレスポンシブサイトを作成する。
tailwindcss のインストール方法は？
インストール手順については、tailwindcss.com のドキュメント全体を確認してください
tailwindcss はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/tailwindlabs/tailwindcss

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト