01-4. Create Next.js app (Tailwind CSS)

Reset CSS

예전에는 Reset CSS를 해주었지만 

Tailwind는 설치만 하면 기본적인 Reset을 (margin이나 padding) 해주므로 따로 할 필요가 없지만

app/globals.css 파일은 생성해주어야 한다.

globals.css 코드는 밑에서 채우고 우선

app/layout.tsx에서 import 해준다.

import './globals.css';

 

Tailwind CSS

https://nextjs.org/docs/app/building-your-application/styling 를 가면 Next.js에서 사용할 수 있는 CSS가 나온다.

SCSS, CSS-in-JS중에 가장 유명한 styled-components를 사용해도 되지만, 요즘에는 Tailwind CSS의 점유율이 점점 늘어나는 추세이다. 그래서 우리도 Tailwind CSS를 써보기로 하였다.

Tailwind는 utility-first framework이다.

기존 CSS의 문제점 중 하나의 component를 스타일링하는데 여러 줄의 별도의 CSS가 들지만, 어차피 재사용률이 떨어졌다. Tailwind는 이를 좀 더 간단하게 해준다.

Utility class란 predefined CSS class를 말한다. 그래서 코드가 더 concise해진다.

... 라고 설명은 하지만...

첫인상은 그냥 또 하나의 외계어같다. 그리고 심지어 CSS의 best practice를 역행하는 듯 보인다.

왜냐하면 외관적으로 볼 때는 그냥 bad practice인 in-line styling처럼 보이기 때문이다.

나처럼 생각하는 사람이 많은지 공식 문서에도 아래 링크와 같이 in-line 스타일이랑 뭐가 다른지 비교해놨다.

https://tailwindcss.com/docs/utility-first#why-not-just-use-inline-styles

여기에 inline에 비교해 장점들이 나온다.

→ 일반 inline으로 할 수 없는 반응형 도구, mouse hover같은 기능도 지원한다고 한다.

익숙해지면 SCSS나 styled-components에 비해 코딩 속도는 확 줄어들 것 같긴 하다.

 

Installing Tailwind CSS

참조: https://tailwindcss.com/docs/guides/nextjs

참조: https://nextjs.org/docs/app/building-your-application/styling/tailwind-css

이것대로 세 가지 install

$ pnpm add --save-dev tailwindcss postcss autoprefixer

tailwind는 postcss를 기반으로 한 스타일시트를 변환하는 도구이고

autoprefixer는 브라우저에 특화된 prefix를 CSS 규칙으로 더해준다.

다음 Init 커맨드를 실행하면

$ npx tailwindcss init -p

tailwind.config.js와 postcss.config.js 파일 2개가 자동 생성된다.

tailwind.config.js는 이름을 .ts로 바꿔도 되니 지금 바꾸고,

이 파일에 있는 내용을 싹 지우고, 다음 코드로 대체한다.

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
export default config;

 

postcss.config.js에서 만약에 ESLint 에러가 난다면

tsconfig.json에 다음을 추가하고

  "include": [
	...
    "**/*.js",
    ...
  ],

지난 글에 미리 추가해주었지만 .eslintrc.json에 다음 코드가 있는지 확인한다.

{
  "env": {
	...
    "node": true,
	...
  },

React는 import를 쓰지만 Node.js는 require 혹은 module.exports를 쓰는데 위에처럼 node: true를 추가해주면 된다.

 

app/globals.css에 최상단에 다음을 추가한다.

@tailwind base;
@tailwind components;
@tailwind utilities;

위에 세 줄을 추가해주는 순간 CSS reset이 먹힌다. 즉, 아까 작성했던 header와 <h1>HOME</h1>이 전부 다 크롬 브라우저에서 16px 글자 크기로 같아진다.

 

만약 VS code extension중에

이것이 설치 안 되어있다면 노란색 밑줄이 위의 세 줄에 보일 것이다.

위 PostCSS extension을 설치하는 순간 그 줄이 사라진다.

 

테스트를 위해 app/page.tsx에 다음 코드를 넣고 npm run dev로 실행해본다.

<h1 className="text-blue-400 font-bold underline">Home</h1>

 

VS code extension

Tailwind CSS IntelliSense라는 extension을 VS code에 설치하면 

tailwind 코딩시 class name 미리보기 기능을 제공해준다.

 

Tailwind specific libraries

Material, Antdesign, Chakra 와 같은 UI library지만 tailwind 전용 UI library 중 핫한 것이 3개 있다.

- Tailwind UI

- headless UI

- shadcn/ui

 

Tailwind 연습용 사이트

https://play.tailwindcss.com/

이 사이트에 가서 HTML부분을 싹 지우고 연습해볼 수 있다.

이 사이트 밑에 보면 Tailwind가 reset css를 어떻게 사용하고 있는지도 보여준다.