Tailwindを学ぶ カスタマイズや基本 @yukilulu0229



## brackpointでレスポンシブ

https://tailwindcss.com/docs/responsive-design

### それぞれの接頭辞のブレイクポイント

(px)
- sm: 640
- md: 768
- lg: 1024
- xl: 1280
- 2xl: 1536

```Basic.tsx
<p className="text-7xl font-bold lg:text-3xl sm:text-red-400 md:text-blue-400 lg:text-pink-400 xl:text-green-400">tailwind css 入門</p>
```

接頭辞につけるとそれに応じたブレイクポイントが設定される
基本はそれ以上という解釈でよい


### container

https://tailwindcss.com/docs/container

![スクリーンショット 2024-02-15 16.31.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610706/95de77fe-786d-b7cf-7785-e269ffeef3c8.png)

ブレイクポイントが自動的に設定される

#### 使い方

```Sample.tsx
<div className="bg-body text-white h-full">
  <header className="py-6 ">
    <nav className="container mx-auto">
      <div>
        <h1>yukilulu02229.com</h1>
      </div>

      <div>
        <a href="/">ホーム</a>
        <a href="/">ポートフォリオ</a>
        <a href="/">お客様</a>
        <a href="/"><button>お問い合わせ</button></a>
      </div>
    </nav>
  </header>
</div>
```

```
container mx-auto
```



## 繰り返し使うスタイルの抽象化

```Basic.tsx
 <section>
  <h2>Button作る</h2>

  <button
    className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">ボタン
  </button>

  <button
    className="bg-blue-500 hover:bg-blue-600 text-white ml-10 custom-button">抽象化ボタン
  </button>

  <button
    className="custom-button-blue ml-10 custom-button">抽象化2ボタン
  </button>
</section>

```

### 抽象化

```App.css
.custom-button {
  @apply font-bold px-4 py-2 rounded
}
```

クラス名を生成して  ```@apply``` つける そしてtailwindの書き方をする

```Basic.tsx
 <button
    className="bg-blue-500 hover:bg-blue-600 text-white ml-10 custom-button">抽象化ボタン
  </button>
```

custom-buttonをそのまま書く
 

### 抽象化2(hoverなど)

```App.css
.custom-button-blue {
  @apply bg-blue-500 hover:bg-blue-600 text-white
}

.custom-button-blue:hover {
  @apply bg-blue-600
}
```

hoverはクラス名側につけてしまう

```Basic.tsx
<button
    className="custom-button-blue ml-10 custom-button">抽象化2ボタン
  </button>
```

それによって :hoverみたいな呼び方をせずにcustom-button-blueでまとめられる

## カスタマイズ

https://tailwindcss.com/docs/installation

できること

```tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

```

### フォント

https://fonts.google.com/

https://tailwindcss.com/docs/configuration


```index.css
@import url('https://fonts.googleapis.com/css2?family=Reggae+One&display=swap');


@tailwind base;
@tailwind components;
@tailwind utilities;

```

```
@import url('https://fonts.googleapis.com/css2?family=Reggae+One&display=swap');
```

google fontで選んだところからimpotを見つけてコピペ

```tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        poppins: ["Poppins", "sans-serif"],
      }
    },
  },
};

```

- fontFmilyで定義する
- 配列にするのを忘れないように

```index.html
<!doctype html>
<html lang="jp">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tailwind_udemy_shin</title>
  </head>

  <body class="font-poppins">
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

```

- bodyで使う場合はbodyで適用させる



### カスタマイズカラー

```tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: {
          100: "#ebf8ff",
          300: "#90cdf4",
          500: "#4299e1"
        }
      }
    },
  },
};

```

```
  colors: {
    primary: {
      100: "#ebf8ff",
      300: "#90cdf4",
      500: "#4299e1"
    }
  }
```

で任意の色を使えるようにする

```Basic.tsx
button
  className="ml-10 custom-button bg-primary-100">カスタマイズカラーボタン
</button>
```

```
bg-primary-100
```

ここのprimary-100が適用されている

## 便利なユーティリティ

### space-x

https://tailwindcss.com/docs/space

```Smaple.tsx
<div className="space-x-12">
    <a href="/" className="hover:text-selected-text transition-all duration-300">ホーム</a>
    <a href="/">ポートフォリオ</a>
    <a href="/">お客様</a>
    <a href="/">
      <button>お問い合わせ</button>
    </a>
</div>

```

```
space-x-12
```

インラインブロックの連続の間隔を空けたいときなど便利

![スクリーンショット 2024-02-15 17.00.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610706/c882626f-9393-2c36-3405-97ee62568717.png)