Next.js로 풀스택 개발자 포트폴리오 만들기 (5) tailwind CSS 전역적으로 색상 세팅하기, tailwind.config 설정, tailwind primary color 설정
Tailwind CSS 설정 파일인 tailwind.config.js에서 hsl(var(--primary))를 사용하는 색상 설정을 구성하는 방법에 대해 설명드리겠습니다. 이 파일을 통해 Tailwind CSS의 기본 테마를 확장하고, 커스텀 유틸리티를 추가할 수 있습니다.
Configuration - Tailwind CSS
A guide to configuring and customizing your Tailwind installation.
tailwindcss.com
color를 전역적으로 설정하기 위해서는 여러가지 방법을 사용할 수 있는데 첫번째로 tailwindcss.config 파일에서 색상 변수를 설정하고 아래와 같이 만들 수 있습니다.
/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
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',
}
}
}
}저는 두번째 방법으로는 다양하게 활용하기 위해 globals.css 파일을 이용해 색상을 설정하고 사용해보겠습니다.
1. 기본 설정 파일 생성
우선, 프로젝트 root 디렉토리에 tailwind.config.js 파일을 확인합니다.
import type { Config } from "tailwindcss";
const config = {
darkMode: ["class"],
content: [
"./pages/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./app/**/*.{ts,tsx}",
"./src/**/*.{ts,tsx}",
],
prefix: "",
theme: {
container: {
center: true,
padding: "0.5rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
} satisfies Config;
export default config;
2. 설정 파일 수정
처음 설치했을 때 nextjs css 기본 config이고 원래는 basic 틀은 아래 코드 입니다.
module.exports = {
theme: {
extend: {
colors: {
primary: 'hsl(var(--primary))',
},
},
},
variants: {
extend: {},
},
plugins: [],
};
큰 틀로 보자면 theme 안에 colors들을 기본 설정해서 사용할 수 있고 그 컬러들은 app 폴더안에 globals.css에서 설정해주면 됩니다.
tailwind.config.ts 에 변수 구조를 설명드리면, hsl(var(--primary))에서 hsl은 Hue, Saturation, Lightness의 약자로, 색상(색조), 채도, 명도를 나타내는 색상 표현 방식입니다. 예를 들어, hsl(210, 100%, 50%)는 파란색을 나타냅니다.
Figma에서는 Selection colors를 선택 후 기본값인 Hex를 바꿔서 HSL색상을 확인 할 수 있습니다.
3. CSS 변수 정의
CSS 변수를 정의하는 방법은 두 가지가 있습니다: 전역적으로 정의하거나, 특정 요소에만 적용하는 방법입니다. 전역적으로 정의하는 것이 일반적이며, 이를 위해 styles.css 또는 index.css 파일의 :root 선택자 내에 변수를 정의합니다.
:root {
--primary: 210, 100%, 50%; /* HSL 값 */
}
var(--primary)는 CSS 변수를 참조하는 방식입니다. --primary는 CSS 변수로, 일반적으로 다른 CSS 파일이나 스타일 선언 내에서 정의됩니다.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
4. Tailwind CSS 파일에 변수 사용
Tailwind CSS 유틸리티 클래스에서 --primary 변수를 사용하여 색상을 설정할 수 있습니다. 예를 들어, bg-primary 클래스를 사용하여 배경색을 설정할 수 있습니다:
View(HTML)를 만드는 코드 내에서는 아래와 같이 정의 할 수 있습니다.
<div class="bg-primary text-white p-4">
This is a primary colored box.
</div>
이렇게 하면 Tailwind CSS에서 --primary 변수를 사용하여 색상을 정의하고 사용할 수 있습니다. 이를 통해 색상을 중앙에서 관리하고, 필요한 곳에서 쉽게 재사용할 수 있습니다.
제 코드에 적용한 순서를 보여드리겠습니다!
처음 globals.css에 --blue를 정의해주시고 tailwind.configs.ts에서 blue를 전역 변수화 해줍니다.
마지막으로 className에서 text-blue로 background는 blue-foreground로 색상을 지정해주면,
화면에서 제가 설정했던 CSS 색상을 확인 할 수 있습니다.
VScode extension 추천
1. Tailwind CSS IntelliSense
Tailwind CSS 자동완성을 할 수 있도록 추천 및 도와줍니다.
2. Color Highight
페이지에 직접적으로 사용한 HEX 색상을 바로 확인 할 수 있도록 보여줍니다.
