logo
About

Nextjs에서 tailwind 써보기

공식문서 보면서 tailwind 써보기

2023-02-18

예전에 하다가 중단된 프로젝트를 다시 시작해 보려고 새 레포로 마이그레이션 하는 과정에서

패키지 버전도 올리고, 다른 기술을 찾아보다가 예전부터 써보고싶었던 tailwindcss를 써보기로 했다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

테일윈드 설치 init을 하게 되면 postcss.config.js 파일과 tailwind.config.js 파일이 생성된다

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

나는 src 폴더를 사용하기 때문에 "./src/**/*.{js,ts,jsx,tsx}" 경로로 사용

// globals.css
@tailwind base; // 테일윈드의 기본 스타일
@tailwind components; // 모든 클래스 요소
@tailwind utilities; // 유틸리티

전역으로 설정

구글에서 지원하는 폰트를 사용해 tailwind에 적용

// Layout
const roboto = Roboto({
    subsets: ["latin"],
    weight: ["400", "500", "700"],
    variable: "--font-roboto"
});

const Layout = ({ children }: { children: React.ReactNode }) => {
    return (
        <main className={`max-w-3xl m-auto p-3 text-black-500 ${roboto.className} font-sans`}>
            <Header />
            {children}
        </main>
    );
};

export default Layout;

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{js,ts,jsx,tsx}"],
    theme: {
        extend: {
            colors: {
                primary: {
                    50: "#f4f6fa",
                    100: "#e8edf5",
                    200: "#c6d1e5",
                    300: "#a4b6d5",
                    400: "#5f7fb6",
                    500: "#1b4897",
                    600: "#184188",
                    700: "#143671",
                    800: "#102b5b",
                    900: "#0d234a"
                },
                secondary: {
                    50: "#fefaf5",
                    100: "#fcf5eb",
                    200: "#f9e6cd",
                    300: "#f5d7af",
                    400: "#edb872",
                    500: "#e59a36",
                    600: "#ce8b31",
                    700: "#ac7429",
                    800: "#895c20",
                    900: "#704b1a"
                },
                black: {
                    50: "#f5f5f5",
                    100: "#eaebeb",
                    200: "#cbcccd",
                    300: "#acaeaf",
                    400: "#6d7174",
                    500: "#2f3438",
                    600: "#2a2f32",
                    700: "#23272a",
                    800: "#1c1f22",
                    900: "#17191b"
                },
                white: "#ffffff"
            },
            fontFamily: {
                sans: ["var(--font-roboto)"]
            }
        }
    }
};

테일윈드 자체에 기본 색상이 지정된 것도 있었고,

이런식으로 색상도 지정하면 자동으로 적용되는것 같다.

기본색상을 완전히 바꾸려면 theme.colors서 설정이 가능하다고 한다.

<img class="w-16 md:w-32 lg:w-48" src="...">

<button class="dark:md:hover:bg-fuchsia-600 ...">
  Save changes
</button>