류준열의 기술 블로그 | tailwind 만들어보기

mini tailwind 만들어보기

미니 tailwind를 만들어보자!

tailwind 동작방식

tailwind의 동작방식을 생각해보면 다음과 같다.

개발자가 약속된 class를 입력한다.
빌드하면 약속된 css가 만들어진다.

작업

완성본은 이 커밋에 있다. https://github.com/ryu9663/tailwind-self/commit/c351a1b8703a9515f52ee3d9c5706a5560854d09

간소화된 Palette

다음과 같이 간소화된 Palette를 만든다.

// pallete.ts

export const colors = {
  primary: "#2563eb",
  primaryDark: "#1d4ed8",
  gray100: "#f3f4f6",
  gray500: "#6b7280",
  gray900: "#111827",
  white: "#ffffff",
  black: "#000000",
};

export const spacing = {
  0: "0px",
  1: "4px",
  2: "8px",
  3: "12px",
  4: "16px",
  6: "24px",
  8: "32px",
};

export const fontSize = {
  sm: "0.875rem",
  base: "1rem",
  lg: "1.125rem",
  xl: "1.25rem",
  "2xl": "1.5rem",
};

generate css 스크립트

이제 약속된 css를 만드는 스크립트를 만들꺼다.

파일을 만들기 위해 nodeJS의 writeFileSync를 이용한다.

그리고 아래와 같이 css를 만들면 된다.

import { writeFileSync } from "fs";
import { colors, spacing, fontSize } from "../src/styles/pallete";

let css = "";

for (const [key, value] of Object.entries(spacing)) {
  css += `.m-${key}{margin:${value}}\n`;
  css += `.mt-${key}{margin-top:${value}}\n`;
  ...
}

for (const [name, value] of Object.entries(colors)) {
  css += `.bg-${name}{background-color:${value}}\n`;
  css += `.text-${name}{color:${value}}\n`;
}

for (const [name, value] of Object.entries(fontSize)) {
  css += `.text-${name}{font-size:${value}}\n`;
}

css += `
.flex{display:flex}
...
.justify-start{justify-content:flex-start}
.justify-center{justify-content:center}
...
`;

writeFileSync("mini-tailwind.css", css);

build

tsconfig등 ts 세팅은 생략한다.

package.json은 다음과 같이 적었다.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:css": "tsc scripts/generate-css.ts --outDir dist && node dist/scripts/generate-css.js"
  },
  "devDependencies": {
    "@types/node": "^24.10.1",
    "ts-node": "^10.9.2",
    "typescript": "^5.9.3"
  }

npm run build:css를 입력하면 generate-css.ts를 dist파일에 js로 컴파일하고 컴파일된 js를 스크립트 실행시킨다.

그럼 다음과 같은 css가 만들어진다.

실제 테스트

아래와 같이 index.html을 만들고 빌드된 css mini-tailwind.css를 연결, 약속된 class text-primaryDark 를 입력했다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="./mini-tailwind.css" rel="stylesheet" />

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="text-primaryDark">하이하이</div>
  </body>
</html>

html을 키면 다음과 같이 tailwind가 적용된것을 확인할수있다.

개발자가 미리 약속된 class 이름만 써준다.
빌드 시점에 CSS를 만들어 준다.

아이디어만 놓고 보면 정말 단순한데, 이 단순함을 구현해서 전 세계적으로 인기 있는 라이브러리를 만들다니

개발자 류준열