brackpointでレスポンシブ
それぞれの接頭辞のブレイクポイント
(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
ブレイクポイントが自動的に設定される
使い方
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でまとめられる
カスタマイズ
できること
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',
}
}
},
}
フォント
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
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
インラインブロックの連続の間隔を空けたいときなど便利
