Tailwind CSS

개발

Tailwind CSS

sooros51327/31/2022Tailwind

Tailwind CSS란?

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

https://tailwindcss.com/

Tailwind CSS는 utility-first 특성을 가진 CSS 프레임워크. 미리 정의된 클래스들의 모음이다. 부트스트랩이랑 비슷한데 더 많은 유틸리티 클래스들이 있다. 테마 기능과 일관된 디자인 설정이 가능하다.

대규모 프로젝트엔 적합하지 않다고 얘기가 좀 있는데 퍼블리셔랑 디자이너가 Tailwind를 알고 있다면 크게 문제가 없다고 한다. 실제로 사용을 해 봐야 알거 같음.

Styled Component vs Tailwind CSS

Styled Component 단점

단순한 스타일도 매번 컴포넌트를 만들어야 한다

항상 컴포넌트명을 고민하게 된다

라이트모드, 다크모드 스위칭을 할 때, 테마가 변경될 때 모든 컴포넌트가 리렌더링이 됨

styled로 탄생된 컴포넌트는 a태그여도 Next/Link의 컴포넌트에 Anchor 태그로 넣을 수 없다. → https://github.com/vercel/next.js/issues/1942

Tailwind CSS 단점

클래스명이 길어짐

클래스로만 확인 하기엔 어느 컴포넌트인지 찾기 힘듬

예전엔 Tailwind의 존재를 몰랐고 자주 사용하는 단순한 스타일들은 아래 코드와 같이 module폴더에 따로 모아놨었는데 좀 불편하긴 했다.

typescript

export const FlexAutoBox = styled('div')`
  flex: auto;
`;

export const Flex0025Box = styled('div')`
  flex: 0 0 25%;
`;

export const Flex0033Box = styled('div')`
  flex: 0 0 33.333333%;
`;

export const Flex0050Box = styled('div')`
  flex: 0 0 50%;
`;

export const Flex0066Box = styled('div')`
  flex: 0 0 66.666666%;
`;

export const Flex0075Box = styled('div')`
  flex: 0 0 75%;
`;

이래야 되나 싶은 마음이 항상 들었다…

실보단 득이 많아서 tailwind를 선택함

Tailwind CSS 설치

autoprefixer, postcss패키지는 크로스 브라우징을 도와준다.

bash

npm install tailwindcss@latest postcss@latest autoprefixer@latest

설정파일들 생성

typescript

npx tailwindcss init -p

-p 옵션은 postcss.config.js파일도 만든다는 옵션이다.

실행 시 아래 내용과 같이 tailwind.config.js, postcss.config.js파일이 생긴다. postcss에 tailwindcss, autoprefixer가 자동으로 플러그인에 들어가있다.

typescript

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

typescript

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

배열로 넣어도 가능하다.

typescript

// postcss.config.js
module.exports = {
  plugins: ['tailwindcss', 'autoprefixer']
};

최적화 하기

tailwind.config.js파일에 purge 옵션을 사용해서 파일 크기를 줄일 수 있다고 하는데 purge는 v3 이전 방식이고 v3부터는 content에 추가하면 된다. (https://tailwindcss.com/docs/upgrade-guide#configure-content-sources)

typescript

// tailwind.config.js
module.exports = {
content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  ...
}

프로젝트에 Tailwind CSS 스타일 추가하기

메인 css파일에 아래 내용 추가

나의 경우는 /styles/globals.css 파일에 저장했다.

css

/* /styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

프레임워크마다 다른 설치 방법들

추가로 최상단 js파일에 import를 해줘야 하는데 각각 방법이 다 적혀있다.

모든 프레임워크 설명서 - https://tailwindcss.com/docs/installation/framework-guides

React - https://tailwindcss.com/docs/guides/create-react-app

Next.js - https://tailwindcss.com/docs/guides/nextjs

나는 Next.js 사용자니까

tailwind.config.js파일에 content 부분 추가

typescript

// tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  ...
}

/pages/_app.tsx에 import 구문 추가

typescript

// /pages/_app.tsx
import '../styles/globals.css';

아무 경로로 파일에 아래 내용으로 작성하고 접속해서 잘 나오면 설치가 끝났다.

typescript

// /pages/index.tsx
export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

VS Code 확장프로그램 설치

https://tailwindcss.com/docs/editor-setup

PostCSS Language Support, Tailwind CSS IntelliSense 2가지는 설치

Headwind는 추후 관리를 위해 설치하는걸 추천

PostCSS Language Support

https://marketplace.visualstudio.com/items?itemName=csstools.postcss

CSS파일의 @tailwind, @apply, @screen 같은 구문들이 인식되지 않고 오류가 발생하는데 이걸 해결해준다.

Tailwind CSS IntelliSense

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

자동완성, 미리보기, 구문 강조, 오류 표시 등을 해준다.

Headwind

https://marketplace.visualstudio.com/items?itemName=heybourn.headwind

스타일들을 카테고리 기준으로 자동 정렬해준다.

prettier 세팅하는 느낌

theme 설정

https://tailwindcss.com/docs/configuration

Preflight 끄고 싶을 때

CSS 초기화라고 생각하면 되는데 Tailwind에서 기본적으로 세팅하는 스타일들이다. 원치 않으면 끄는 설정이 가능하다

typescript

// tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,
  }
}

커스텀 한정자

&를 이용해서 현재 태그나 자식 태그를 선택해 여러가지 할 수 있는데 대괄호 안에 써야한다.

가상(pseudo) 클래스

html

<li class="[&:nth-child(3)]:underline"></li>

3번째 li에만 underline적용하는 클래스

자손 선택자

CSS에선 자손 선택자는 공백( )을 이용해 선택하게 되어있는데 CSS에선 그렇고 클래스를 지정하는 문법상 구분 기호가 공백이다보니 쓸 수 없다. tailwind에선 _언더스코어를 이용해 자손 선택을 할 수 있다.

html

<li class="[&_span]:text-blue-500">
	<a>
		<span>파란색 텍스트</span>
	</a>
</li>

자식 선택자

CSS와 똑같이 부등호 기호(>, <)를 쓰면 된다.

html

<li class="[&>a]:text-blue-500">
	<a>파란색 텍스트</a>
</li>

production에서 클래스 보존

PurgeCSS를 통해 사용하지 않는 클래스들은 자동으로 제거되는 설정을 했었다.

이 기능을 이용하면 타이핑으로 바로 적은 클래스가 아닌 동적으로 이름이 생성되는 클래스들 btn-order-${side} 같은 경우는 인식하지 못한다. 이 문제를 해결하기 위해 tailwind.config.js에서 safelist를 설정하면 된다. css파일에 주석으로 하는 방법도 있는데 적용이 안된다…

javascript

// tailwind.config.js
module.exports = {
	// ...
  safelist: [
		'btn-order',
		'btn-order-ask',
		'btn-order-bid',
		{
      pattern: /bg-(red|green|blue)-(100|200|300)/,
      variants: ['lg', 'hover', 'focus', 'lg:hover'],
    }
	],
	// ...
};

Safelisting | PurgeCSS

PurgeCSS is a tool to remove unused CSS from your project

https://purgecss.com/safelisting.html

참고 출처

Hello Tailwind CSS! | 장점, 단점, 사용법 | Wonny Log

일관된 디자인을 유지하면서도 쉽고 빠르게 스타일링하기 | 이번 블로그에 도입한 Tailwind CSS 를 소개하고자 한다. 마음에 쏙 드는 CSS 프레임워크로 인라인 스타일을 사용…

https://wonny.space/writing/dev/hello-tailwind-css

Tailwind CSS 사용기 | 카카오엔터테인먼트 FE 기술블로그

Tailwind CSS를 사용해보면서 얻은 소소한 팁들을 공유합니다.

https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/

View Archive