tailwindCSS 사용 방법

tailwindCSS 세팅 과정

1단계 npm install -D tailwindcss

2단계 npx tailwindcss init

3단계 tailwind.config.js 파일을 생성하고 설정을 입력한다.

4단계 루트 디렉토리에 postcss.config.js 파일을 생성하고 설정을 입력한다.

//tailwind.config.js

/** @type {import("tailwindcss").Config} */
module.exports = {
  // 다크모드를 위해
  darkMode : "class",
  //pages와 src 하위 파일에 대해서 tailwindCSS를 사용할 수 있게 해준다. 
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily:{
        pt : ["PT Serif", "serif"],
        sans: ["Inter", "sans-serif"],
      }
    },
  },
  plugins: [],
}

//global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

footer {  
  @apply text-gray-600 dark:text-white bg-gray-100 dark:bg-slate-600/20;
}

//postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: { config: "./tailwind.config.js" },
    autoprefixer: {},
  },
};

postcss.config.js

tailwindCSS를 사용할 때, postcss.config.js 파일은 PostCSS 플러그인 및 설정을 구성하는 파일입니다.

tailwindCSS는 PostCSS를 사용하여 스타일을 처리하므로, postcss.config.js 파일은 다음과 같은 내용을 포함해야합니다.

tailwindcss 플러그인은 tailwindCSS 스타일을 처리하고,
autoprefixer 플러그인은 CSS 코드에 벤더 프리픽스를 자동으로 추가합니다.

postcss.config.js 파일은 tailwindCSS를 사용하는 프로젝트의 루트 디렉토리에 위치시켜야 합니다.

벤더 프리픽스(vendor prefix)는 웹 브라우저마다 CSS 속성이나 값의 구현 방법이 다르기 때문에, 웹 개발자가 CSS 속성이나 값에 해당하는 브라우저 별 접두사(prefix)를 추가해야하는 경우가 있습니다.

예를 들어,
transform CSS 속성은
웹 킷(WebKit) 기반 브라우저에서는 -webkit-transform으로,
파이어폭스(Firefox)에서는 -moz-transform으로,
마이크로소프트(Microsoft) 엣지(Edge)에서는 -ms-transform으로,
오페라(Opera)에서는 -o-transform으로 구현됩니다.
따라서, 모든 브라우저에서 transform을 제대로 지원하기 위해서는 다음과 같이 모든 벤더 프리픽스를 추가해야 합니다.

.element {
  -webkit-transform: translateX(50%);
     -moz-transform: translateX(50%);
      -ms-transform: translateX(50%);
       -o-transform: translateX(50%);
          transform: translateX(50%);
}

하지만 이는 코드가 길어지고 유지보수가 어렵기 때문에,
autoprefixer와 같은 PostCSS 플러그인을 사용하여 자동으로 벤더 프리픽스를 추가하는 것이 좋습니다.

autoprefixer는 CSS vendor prefixes를 자동으로 추가해주는 PostCSS 플러그인입니다.
autoprefixer를 설정할 때, 일반적으로는 원하는 브라우저 지원 범위를 정의하고, 그에 따라 CSS vendor prefixes를 추가해줍니다.

module.exports = {
  plugins: {
    tailwindcss: { config: "./tailwind.config.js" },
    autoprefixer: {
      browsers: ["last 2 versions", "> 1%"],
      cascade: false
    },
  },
};

위의 코드에서 browsers 옵션은 지원하고자 하는 브라우저 범위를 정의하는데, "last 2 versions"는 마지막 두 버전의 브라우저를 지원하고, "> 1%"는 전 세계에서 1% 이상의 사용률을 가진 브라우저를 지원합니다.

cascade 옵션은 CSS vendor prefixes를 어떻게 정렬할지 결정하는데, true이면 자동으로 알파벳순으로 정렬하고, false이면 기본값인 알파벳순으로 정렬하지 않습니다.

postcss공식문서

다크모드

'next-themes'은 Next.js 애플리케이션에서 쉽게 다크 모드를 구현할 수 있도록 도와주는 라이브러리입니다.

'next-themes' 라이브러리의 핵심 기능은 ThemeProvider 컴포넌트입니다.
이 컴포넌트는 children으로 전달된 모든 컴포넌트를 다크 모드를 지원하는 테마로 감싸줍니다.

import "../styles/globals.css"
import type { AppProps } from "next/app"
import { ThemeProvider } from "next-themes"

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  )
}
export default MyApp

위 코드에서 ThemeProvider는 defaultTheme과 attribute 옵션을 전달받습니다.
defaultTheme은 애플리케이션에서 사용할 기본 테마를 지정합니다.
attribute는 테마를 적용하기 위한 속성을 지정합니다.
class 값을 사용하면 애플리케이션에서 class 속성을 사용하여 테마를 적용할 수 있습니다.

DarkModeToggle.tsx
import { useTheme } from "next-themes"

const DarkModeToggle = () => {
  const { theme, setTheme } = useTheme()

위 코드에서 useTheme 훅은 theme과 setTheme을 반환합니다. theme은 현재 사용 중인 테마를 나타내고, setTheme은 테마를 변경하는 함수입니다.

theme은 로컬스토리지에 저장되어 있고 defaultTheme="dark" 로 설정할 경우 로컬스토리지에 theme값이 없을 경우 dark가 기본 값으로 들어가게 된다.

<ThemeProvider defaultTheme="dark"  attribute="class">
  <Component {...pageProps} />
</ThemeProvider>

tailwindCSS 스타일 적용하기

.head-link {
    @apply mr-5 hover:text-gray-900 font-medium hover:text-[#5367FF] 
}

위의 코드 처럼 .head-link 클래스에 어떤 스타일을 적용시킬지 미리 작성해두면 변수 처럼 사용할 수 있다.

<Link href="/" className="head-link">Home</Link>

tailwindCSS에서 반응형 디자인 구현하는 키워드

lg, md, sm은 Tailwind CSS에서 사용되는 반응형 디자인 클래스입니다.
이 클래스들은 다양한 디바이스 크기와 화면 해상도에 대응하여 스타일을 적용할 수 있도록 도와줍니다.

lg: "large"의 약어로, 대형 디바이스(데스크탑 등)에 대응하는 클래스입니다.
md: "medium"의 약어로, 중형 디바이스(태블릿 등)에 대응하는 클래스입니다.
sm: "small"의 약어로, 소형 디바이스(스마트폰 등)에 대응하는 클래스입니다.

예를 들어, bg-blue-500 md:bg-green-500 lg:bg-red-500와 같이 클래스를 적용하면, 화면 크기에 따라 다른 배경색을 가지게 됩니다.

이는 반응형 디자인을 구현하는 데 유용하게 사용됩니다.

Next.js에서 tailwindCSS 라이브러리를 사용하면서 구글폰트 사용하기

1단계 : pages폴더 하위에 _document.tsx 파일을 생성한다.
2단계 : Head태그에 구글폰트에서 제공하는 link태그를 삽입한다.

      <Html>
        <Head>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" />
          <link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
          <link rel="stylesheet"href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" />
          <link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,700;1,400&display=swap" rel="stylesheet" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>

3단계 : tailwind.config.js 설정에서 fontFamily 설정을 변경한다.

/** @type {import("tailwindcss").Config} */
module.exports = {
  mode:"jit",
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode : "class",
  theme: {
    extend: {
      fontFamily:{
        pt : ["PT Serif", "serif"],
        sans: ["Inter", "sans-serif"],
      }
    },
  },
  plugins: [],
}

4단계 : class에 font-pt를 주면 구글 폰트가 적용된다.