tailwind.css
Custom Styles - 커스텀 테마
tailwind.config.js 파일에 옵션들을 작성해두면 다른 컴포넌트에서도 해당 변수를 사용해서 적용시킬 수 있다. theme 에 추가하면 된다.
👩🏻💻 예시 코드
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html", "./src/**/*.{js,jsx,ts,tsx}'],
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',
}
}
},
}- content : tailwind ㅡㄹ래스 이름이 포함된 모든 HTML, JS 구성요소 및 파일 경로 구성
- theme : 색상, 글꼴, 글자 크기, border 속성 등 시각적인 디자인 담당
🔍 theme 내용추가!
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
somyung: ['Somyung', 'sans-serif'], // 소명 폰트를 저장
},예를 들어 ‘소명’ 폰트를 다운 받아서 적용하고 싶다면 이렇게 fontFamily에 저장해두고
<div>
<h1 className="font-somyung">Tailwind CSS</h1>
</div>;적용하고 싶은 부분에 font- 이후에 적용시킬 폰트를 적어주면 된다!
config.js 에서 적은 ‘somyung’이 변수처럼 사용된다고 이해하면 쉽다.
colors: {
primary: "#EE8A2C", // 메인색상
secondary: { //서브 색상
100: "#FFDAB6"
}
},
//컴포넌트 코드에 적용
{*메인색상 적용*}
<div className="bg-primary flex">
<form>
<input/>
{*서브색상 적용*}
<button className="bg-secondary-100">검색</button>
</form>
</div>임의의 값 사용하기
tailwind는 지원하는 고정된 px 값이나 색상이 있는데 고정된 값 말고 원하는 단위로 적용시키고 싶다면 아래 코드처럼 [] 대괄호로 작성하면 된다.
<div className="w-[100px]">
<h1>Tailwind CSS</h1>
</div>;@layer
여러 컴포넌트에서 같은 스타일이 사용되는 경우가 높은 button, input 같은 건 중복을 줄이고 효율을 높이기 위해 사용자 정의 css를 추가하여 재사용하면 좋다.
👩🏻💻 설정방법
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
.btn {
background-color: red;
color: #fff;
padding: 10px;
}👩🏻💻 적용코드
<button className="btn" type="button">button</button>@layer 문을 사용해서 base, components, utilities 레이어에 스타일 추가도 가능하다.
👩🏻💻 설정방법
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn {
background-color: red;
color: #fff;
padding: 10px;
}- base : 리셋 규칙, html 요소 기본 스타일을 위한 레이어
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-red-950;
}
h2 {
color: red;
}
}- components : 유틸리티로 재정의 할 수 있는 클래스 기반 스타일을 위한 레이어
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.select2-dropdown {
@apply rounded-b-lg shadow-md;
}
.select2-search {
@apply rounded border border-gray-300;
}
.select2-results__group {
@apply text-lg font-bold text-gray-900;
}
}- utilities : 다른 스타일보다 우선으로 하는 소규모 단일 목적 클래스를 위한 레이어 - tailwind가 제공하지 않는 유틸리티 클래스를 만들 때 사용!
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.content-auto {
content-visibility: auto;
}
}@apply
👩🏻💻 설정방법
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components{
.btn {
/* ⭐️ 이미 작성해둔 긴! 속성이 다른데서도 쓰이게 된다면? 혹은 깔끔하게 하고 싶으면?! 이렇게 적고! */
@apply px-6 py-3 bg-blue-500 text-white rounded-md
}
.practice {
width: 300px;
height: 100px;
border: ~~~
}
}👩🏻💻 적용코드
<button className="btn" type="button">button</button>
⭐️ 아까 만든 클래스 명을 적어주면 그대로 적용!출처
왕쪼랩 탈출 목표자의 코딩 공부기록