## はじめに
個人開発でTailwind CSSを使っているので、特徴と使用感を書いていきたいと思います。

## Tailwind CSSとは
ChatGPTに解説してもらいました。
>Tailwind CSSは、プロのウェブ開発者向けに設計された高度なCSSフレームワークです。従来のCSSフレームワークとは異なり、予め定義されたスタイルやコンポーネントが用意されているのではなく、必要なスタイルをクラスベースで直接HTML要素に適用することで、柔軟なデザインを実現します。

>Tailwind CSSの特徴は以下の通りです：
**・ユーティリティファースト:**
 Tailwind CSSは、個々のスタイルをクラスとして提供します。これにより、デザイナーと開発者が必要なスタイルを直接指定し、再利用可能なカスタムスタイルを作成できます。
・カスタマイズ可能: Tailwind CSSは、デフォルトのスタイルセットを提供しますが、プロジェクトに合わせてカスタマイズすることができます。色、フォント、スペーシングなど、さまざまなスタイル要素を調整できます。
**・Responsiveness:** 
Tailwind CSSは、レスポンシブデザインをサポートしており、異なる画面サイズに対応するためのクラスを提供します。
**・コンポーネント指向:** 
Tailwind CSSは、シンプルなビルディングブロックを組み合わせてコンポーネントを構築することに焦点を当てています。これにより、再利用可能なコンポーネントを効果的に作成できます。
**・パフォーマンス:** 
Tailwind CSSは、ビルドプロセス中に未使用のスタイルを自動的に削除することで、最適なパフォーマンスを提供します。この機能により、必要なスタイルのみが最終的なスタイルシートに含まれるため、ページの読み込み時間が短縮されます。
・Tailwind CSSは、デザインから開発までのワークフローを効率的にするためのツールとして、多くの開発者に支持されています。ただし、独自のクラスベースのアプローチと概念に慣れるまでには少し学習のカーブがあるかもしれません。

ということです。


## メリットとデメリット
### ○メリット
**・クラス名を考える必要がない**
　これがかなりでかいです。
　画面を作っている中で、CSSを当てるためだけにクラス名を考える要素が出てきますが、Tailwind CSSではクラス名を当てていくので、その必要がなくなります。

**・柔軟性を持たせることができる**
　特にReactやNext.jsにはchakraUIなどのUIコンポーネントもあり、それを使えばかなり楽にUIを構築していくことができますが、要件に従って開発をしていく中で、柔軟的に仕様を決めていくことが困難な場合もあります。
　しかし、Tailwind CSSを使えば、柔軟性を持たせてUIを構築していくことができます。

**・ビルド時のサイズを小さくできる**
公式では以下のような説明がされています。
>大きなプロジェクトでも 10kB 以下の CSS ファイルにできる。 さらにファイルサイズを小さくするには cssnano などのツールで CSS を最小化し、Brotli で CSS を圧縮する。

大規模開発では、ファイルサイズを小さくするのは手間なので、それの心配が少なくなるのはとても良いです。

### ○デメリット
**・クラス名が長くなる**
　1つの要素にたくさんのクラス名をつけると、かなりクラス名が長くなってしまい、コードの可読性が悪くなってしまうことがあります。

## Tailwind CSSを使用する手順
以下がインストールするコマンドになります。
![img](/mosaic-code.jpg)
Next.jsでは、プロジェクト作成時に、Tailwind CSSを組み込むと、globals.cssファイルに以下ようなコードがあります。
![img](/mosaic-code.jpg)

これは、Tailwind CSSがカスタムスタイルを当てているコードです。
例えば、Tailwind CSSが使われていると、h1〜h6タグのスタイルが当たっていません。
以下が、その一部になります。
![img](/mosaic-code.jpg)
これを見ると、この要素にはmarginが取り除かれていることがわかります。
以下に他のデフォルトスタイルも記載されています。

https://tailwindcss.com/docs/preflight

もしも、デフォルトのスタイルを指定したい場合には、以下のようにコードを書けば設定することができます。
![img](/mosaic-code.jpg)
こうすることで、全ての要素にスタイルが適用させることができます。

## 参考、チートシート等
以下に参考サイトと、チートシートサイトを載せておきます。

https://tailwindcss.com/docs/installation

チートシート2つ↓

https://segakuin.com/css/tailwind/

https://nerdcave.com/tailwind-cheat-sheet


## 最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]

## はじめに
個人開発でTailwind CSSを使っているので、特徴と使用感を書いていきたいと思います。

## Tailwind CSSとは
ChatGPTに解説してもらいました。
>Tailwind CSSは、プロのウェブ開発者向けに設計された高度なCSSフレームワークです。従来のCSSフレームワークとは異なり、予め定義されたスタイルやコンポーネントが用意されているのではなく、必要なスタイルをクラスベースで直接HTML要素に適用することで、柔軟なデザインを実現します。

>Tailwind CSSの特徴は以下の通りです：
**・ユーティリティファースト:**
 Tailwind CSSは、個々のスタイルをクラスとして提供します。これにより、デザイナーと開発者が必要なスタイルを直接指定し、再利用可能なカスタムスタイルを作成できます。
・カスタマイズ可能: Tailwind CSSは、デフォルトのスタイルセットを提供しますが、プロジェクトに合わせてカスタマイズすることができます。色、フォント、スペーシングなど、さまざまなスタイル要素を調整できます。
**・Responsiveness:** 
Tailwind CSSは、レスポンシブデザインをサポートしており、異なる画面サイズに対応するためのクラスを提供します。
**・コンポーネント指向:** 
Tailwind CSSは、シンプルなビルディングブロックを組み合わせてコンポーネントを構築することに焦点を当てています。これにより、再利用可能なコンポーネントを効果的に作成できます。
**・パフォーマンス:** 
Tailwind CSSは、ビルドプロセス中に未使用のスタイルを自動的に削除することで、最適なパフォーマンスを提供します。この機能により、必要なスタイルのみが最終的なスタイルシートに含まれるため、ページの読み込み時間が短縮されます。
・Tailwind CSSは、デザインから開発までのワークフローを効率的にするためのツールとして、多くの開発者に支持されています。ただし、独自のクラスベースのアプローチと概念に慣れるまでには少し学習のカーブがあるかもしれません。

ということです。


## メリットとデメリット
### ○メリット
**・クラス名を考える必要がない**
　これがかなりでかいです。
　画面を作っている中で、CSSを当てるためだけにクラス名を考える要素が出てきますが、Tailwind CSSではクラス名を当てていくので、その必要がなくなります。

**・柔軟性を持たせることができる**
　特にReactやNext.jsにはchakraUIなどのUIコンポーネントもあり、それを使えばかなり楽にUIを構築していくことができますが、要件に従って開発をしていく中で、柔軟的に仕様を決めていくことが困難な場合もあります。
　しかし、Tailwind CSSを使えば、柔軟性を持たせてUIを構築していくことができます。

**・ビルド時のサイズを小さくできる**
公式では以下のような説明がされています。
>大きなプロジェクトでも 10kB 以下の CSS ファイルにできる。 さらにファイルサイズを小さくするには cssnano などのツールで CSS を最小化し、Brotli で CSS を圧縮する。

大規模開発では、ファイルサイズを小さくするのは手間なので、それの心配が少なくなるのはとても良いです。

### ○デメリット
**・クラス名が長くなる**
　1つの要素にたくさんのクラス名をつけると、かなりクラス名が長くなってしまい、コードの可読性が悪くなってしまうことがあります。

## Tailwind CSSを使用する手順
以下がインストールするコマンドになります。
```
npm install -D tailwindcss
npx tailwindcss init
```
Next.jsでは、プロジェクト作成時に、Tailwind CSSを組み込むと、globals.cssファイルに以下ようなコードがあります。
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

これは、Tailwind CSSがカスタムスタイルを当てているコードです。
例えば、Tailwind CSSが使われていると、h1〜h6タグのスタイルが当たっていません。
以下が、その一部になります。
```
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
```
これを見ると、この要素にはmarginが取り除かれていることがわかります。
以下に他のデフォルトスタイルも記載されています。

https://tailwindcss.com/docs/preflight

もしも、デフォルトのスタイルを指定したい場合には、以下のようにコードを書けば設定することができます。
```global.css
@layer base {
  h1 {
    font-size: 2em;
    font-weight: bold;
    margin: 10px 0;
  }
  h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 12px 0;
  }
  h3 {
    font-size: 1.17em;
    font-weight: bold;
    margin: 12px 0;
  }
  h4 {
    font-size: 1em;
    font-weight: bold;
    margin: 12px 0;
  }
  h5 {
    font-size: 0.83em;
    font-weight: bold;
    margin: 12px 0;
  }
  h6 {
    font-size: 0.67em;
    font-weight: bold;
    margin: 12px 0;
  }
}
```
こうすることで、全ての要素にスタイルが適用させることができます。

## 参考、チートシート等
以下に参考サイトと、チートシートサイトを載せておきます。

https://tailwindcss.com/docs/installation

チートシート2つ↓

https://segakuin.com/css/tailwind/

https://nerdcave.com/tailwind-cheat-sheet


## 最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/265c676d17fe21e75242

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

はじめに

Tailwind CSSとは

続きを読むには単価診断を受けてください（30秒）