＜！注意！＞----------------------------------------------------------------
・公式の内容を100%網羅しているものではありません。
・書き方が統一されていないかもしれません。
・実務でどうあるべきかという領域には踏み込みません。
・簡単な説明とサンプルコード、実行した結果がメインで構成されています。
・正しさが担保されているものではありません。
　誤りを確認した場合はご指摘いただけますと幸いです。
・v3.4.13を使っています。現在はv4.0が最新版です。
------------------------------------------------------------------------------

TailwindCSSを使用する機会が多々あったものの、うまく扱いきれずきれいにスタイルを整えきれなかったり、実装に時間がかかったりしました。公式見るとスタイルを適用するとどうなるかイメージできるものの、サンプルコードがそのまま動かせるわけではないので、実装面で今一つ掴めない部分がありました。そのため、一度公式の内容をかみ砕いて、動くコードを作ってまとめてみることにしました。

この本ではダークモード等重要なポイントでありながら、動作確認をする上でJavaScriptを実行させる必要があるケースが存在します。そのケースにおいてはReactを使用します。

多くの場合はJavaScriptを必要とせずに、公式で提供しているTailwindCSSの学習環境であるTailwind Playが利用できるため、基本はそちらの使用を推奨します。
※私自身この本を作成する上でほとんどをTailwind Play上で動作させています。
<a href="https://play.tailwindcss.com/" target="_blank" rel="nofollow noopener noreferrer">https://play.tailwindcss.com/</a>

各章の内容としては関連クラスについてコードと実行結果、必要に応じて解説を載せています。本の最後にはまとめとして学習した内容を使ってZennのホームページを極力再現していきます。

この本で身に着けられるレベル感が確認できると思いますので、先にまとめを流し見していただてもよいかもしれません。



＜！注意！＞----------------------------------------------------------------
・公式の内容を100%網羅しているものではありません。
・書き方が統一されていないかもしれません。
・実務でどうあるべきかという領域には踏み込みません。
・簡単な説明とサンプルコード、実行した結果がメインで構成されています。
・正しさが担保されているものではありません。
　誤りを確認した場合はご指摘いただけますと幸いです。
・v3.4.13を使っています。現在はv4.0が最新版です。
------------------------------------------------------------------------------

TailwindCSSを使用する機会が多々あったものの、うまく扱いきれずきれいにスタイルを整えきれなかったり、実装に時間がかかったりしました。公式見るとスタイルを適用するとどうなるかイメージできるものの、サンプルコードがそのまま動かせるわけではないので、実装面で今一つ掴めない部分がありました。そのため、一度公式の内容をかみ砕いて、動くコードを作ってまとめてみることにしました。

この本ではダークモード等重要なポイントでありながら、動作確認をする上でJavaScriptを実行させる必要があるケースが存在します。そのケースにおいてはReactを使用します。

多くの場合はJavaScriptを必要とせずに、公式で提供しているTailwindCSSの学習環境であるTailwind Playが利用できるため、基本はそちらの使用を推奨します。
※私自身この本を作成する上でほとんどをTailwind Play上で動作させています。
https://play.tailwindcss.com/

各章の内容としては関連クラスについてコードと実行結果、必要に応じて解説を載せています。本の最後にはまとめとして学習した内容を使ってZennのホームページを極力再現していきます。

この本で身に着けられるレベル感が確認できると思いますので、先にまとめを流し見していただてもよいかもしれません。



1から始めるTailwindCSS

はじめに

TailwindCSSと環境構築

Hover, Focus, and Other States

Responsive Design

Dark Mode

Adding Custom Styles

Base Styles

Aspect Ratio

Container

Columns

Display

Floats

Object

Overflow

Overscroll Behavior

Position

Top / Right / Bottom / Left

Visibility

Z-Index

Flex

Grid

Justify

Align

Place Content

Spacing

Sizing

Font

Line

List

Text

Background

Border

Divider

Outline

Ring

Effects

Filters

Tables

Transitions

Animation

Transforms

Accent Color

Cursor

Caret Color

Resize

User Select

まとめ　Zennを作ってみる　ヘッダー編

まとめ　Zennを作ってみる　ボディー準備編

まとめ　Zennを作ってみる　ボディー（Tech）編

まとめ　Zennを作ってみる　ボディー（Books）編

まとめ　Zennを作ってみる　フッター編

まとめ　Zennを作ってみる　調整編

まとめ　Zennを作ってみる　ダークモード編

おわりに

参考

読者コミュニティ｜1から始めるTailwindCSS

javascript

react

tailwindcss

【個人開発】ゲーマー同士が一緒に楽しく遊べる人かどうかの判断をサポートするサービスを開発しました！

たつや、

記事投稿コンテスト「今年の最も大きなチャレンジ」