Tailwind 소개 및 사용법

Namu CHO

20 min readNov 28, 2021

1. 테일윈드 소개 및 설치방법

테일윈드 공식 페이지 참조

: https://tailwindcss.com/docs/installation

1) 소개

테일윈드는 CSS 프레임워크로 html의 클래스 네임을 통해 CSS를 컨트롤한다.

예) 
<img class="w-32 h-32 rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">

순수 CSS로 코드를 작성할 때 생기는 문제점들을 해결해준다.

→ 순수 CSS로 코딩 시 나타나는 문제점들

클래스 네이밍이 지나치게 길어짐
CSS가 유기적으로 얽혀 나중에 컨트롤 하기가 어려워짐
반복적으로 작성되는 코드의 양이 많아짐

2) 설치 방법

기본

npm install tailwindcss
// 혹은
yarn add tailwindcss

위 명령어를 통해 설치할 수 있다.

CRA와 함께 사용

아래 링크를 참조하여 설치하면 된다.

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

2. 테일윈드의 장점

위에서 언급한 순수 CSS로 코드를 작성할 때 발생하는 문제를 모두 해결해준다.
UI단위가 아닌 유틸리티 단위로 이루어졌기 때문에 커스텀이 자유롭다. : Bootstrap, MaterialUI의 경우 UI단위로 이루어졌기 때문에 커스텀하기가 까다롭다.
작성해야 하는 코드의 양이 줄고, 한번 작성한 코드를 @apply, 커스텀컴포넌트(addComponents 플러그인을 통해 만든 컴포넌트) 등을 통해 재 사용이 가능하다.

3. customization

3.1 반응형

2) 반응형 작업

By default, Tailwind uses a mobile first breakpoint system

테일윈드는 모바일 화면이 디폴트인점을 감안하여 코드를 작성해야 한다.

테일윈드에서 제공하는 breakpoint는 min-width 미디어쿼리 속성인데,

max-with 혹은 min, max 둘 다 사용하고 싶다면 아래와 같이 커스텀 하면 된다.

3.2 다크모드

https://tailwindcss.com/docs/dark-mode

다크모드를 사용하기 위해서는 config파일에서 아래 코드를 추가해줘야 한다.

(다크모드는 사이즈가 크기 때문에 사용하지 않으면 옵션을 false로 두는 것이 좋다.)

module.exports = {
/* 아래 볼드처리한 코드라인을 추가해준다. */
  darkMode: 'media',
  // ...
}

다크모드는

backgroundColor
borderColor
gradientColorStops
placeholderColor
textColor

속성에 기본적으로 적용이 되어있고 다른 속성에 추가하고 싶다면 아래처럼 코드를 작성해주면 된다.

// tailwind.config.js에서 볼드처리한 코드 라인을 추가해준다.
module.exports = {
  // ...
  variants: {
    extend: {
      textOpacity: ['dark']
    }
  }
}

예) textOpacity를 dark모드에서 컨트롤 하고 싶을 때 추가해야 하는 코드

그 후 “dark:” variant를 사용하여 다크모드 시 보여줄 화면 속성 코드를 작성하면 된다(반응형 작업과 동일한 원리)

만일 브라우저가 다크모드가 아닐 때에도 수동으로(Toggling dark mode manually)

다크모드를 사용하고 싶다면 config세팅을 아래와 같이 해줘야 한다.

module.exports = {
  darkMode: 'class',
  // ...
}

위 코드를 통해 ‘media’가 아닌 ‘class’로 다크모드를 컨트롤하겠다고 알려준 뒤,

<!-- Dark mode enabled -->
<html class="dark">
<body>
  <!-- Will be black -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

상위 엘레먼트에 dark클래스를 주면 설정한 다크 모드가 실행된다.

3.3 컬러, 폰트, 단위 등

원하는 컬러나 폰트, 높이 값 등을 변수로 선언하여 재 사용할 수 있다.

1) 컬러

회사 서비스의 고유 컬러를 선언하여 재 사용 할 수 있다.

2) 폰트

마찬가지로 원하는 폰트를 선언하여 사용할 수 있다.

(index.css에 폰트 임포트 한 뒤 config파일에 폰트 사용 선언)

3) 사이즈

높이(vh), 너비(vw) 등의 여러 단위의 사이즈를 변수로 선언하여 재 사용할 수 있다.

// 디폴트로 제공되어진 스크린 사이즈 최소값이 640px이므로 
// 320, 475px을 커버하는 xxs, xs 커스텀 스크린사이즈를 추가하였다.	
		
screens: {
  xxs: '320px',
  xs: '475px',
},// 헤더, 푸터와 그 둘을 제외한 컨텐츠 영역 크기를 담은 변수를 추가하였다.
spacing: {
   header: '5rem',
   footer: '5rem',
   content: 'calc(100vh - 10rem)',
},

3.4 애니메이션

테일윈드에서 자체적으로 만들어둔 애니메이션 종류는 아래와 같다.

Spin
Ping
Pulse
Bounce

새로운 애니메이션을 추가하고 싶다면 아래와 같이 하면 된다.

먼저 keyframes로 애니메이션을 만든 뒤,

애니메이션 theme에 추가해준다.

theme: {
    extend: {// 애니메이션을 만든다.
keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
      },// 위에 작성한 애니메이션을 선언한다.
animation: {
        wiggle: 'wiggle 0.1s ease-in-out infinite',
      },
   		},
  }

3.5 아이콘

테일윈드가 만든 heroicon을 활용하거나

icoMoon에서 제공한 svg파일 활용 등 다양한 방법이 있다.

icoMoon의 경우 스프라이트 이미지 파일을 제공한다는 장점이 있다.

3.6 Plugin 커스텀

테일윈드가 기본적으로 제공하는 기능들을 코어 플러그인 기능이라고 한다.

기본 제공 기능들 외에도 커스텀을 통해 테일윈드를 사용할 수 있으며, 대표적인 방법은 아래와 같다.

**// tailwind.config.js 파일 중 표시한 영역에 코드를 추가하면 된다.**module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

1) custom utilities 사용

addUtilities라는 함수를 통해 새로운 스타일을 추가할 수 있다.

예시 1)

plugin(function ({ addUtilities, theme, e }) {
      const rotateUtilities = _.map(theme('rotate'), (value, key) => {
        return {
          [`.${e(`rotateCustom-${key}`)}`]: {
            transform: `rotate(${value})`,
          },
        };
      });      addUtilities(rotateUtilities);
    }),

기존에는 rotate속성을 사용하기 위해서는 클래스명에

‘transform rotate-50’과 같은 코드를 작성해야 했다.

위의 코드를 통해 ‘rotateCustom-50’ 클래스 명을 주어도 같은 결과를 얻을 수 있다.

예시 2)

plugin(function ({ addUtilities, theme, e }) {
      const simpleFlexUtilities = _.map(theme('screens'), (value, key) => {
        return {
          [`.${e(`simpleFlex-${key}`)}`]: {
            [`@apply text-white flex flex-col ${key}:flex-row`]: '',
          },
        };
      });      addUtilities(simpleFlexUtilities);
    }),// 아래와 같이 variants옵션도 줄 수 있다.
// addUtilities(newUtilities, {
//   variants: ['responsive', 'hover'],
// })

기본적으로 flex-direction이 row였다가 사용자가 입력한 브레이크 포인트에 도달하면 column으로 바꾸는 기본적인 반응형 속성을 포함한 클래스 속성을 리턴하는 유틸리티를 제공하는 코드이다.

2) custom components 사용

반복되어 사용되는 속성들의 모음이 있다면 그 속성들을 하나의 클래스 안에 모아 컴포넌트로 선언하여 사용할 수 있다.

예시)

plugin(function ({ addComponents }) {      // 버튼 컴포넌트
      const buttons = {
        '.btn': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
        '.btn-blue': {
          backgroundColor: '#3490dc',
          color: '#fff',
          '&:hover': {
            backgroundColor: '#2779bd',
          },
        },
        '.btn-red': {
          backgroundColor: '#e3342f',
          color: '#fff',
          '&:hover': {
            backgroundColor: '#cc1f1a',
          },
        },
        '.btn-pink': {
          '@apply text-pink-900 bg-gray-500': '',
          '&:hover': {
            '@apply bg-purple-500': '',
          },
        },
      };      addComponents(buttons);
    }),

위의 코드 처럼 클래스 안에 CSS를 작성하여 선언하고 addComponents를 통해 그 값을 넘기면 선언한 속성을 클래스 이름을 통해 접근하여 사용할 수 있다.

순수 CSS로 작성해도 되지만, @apply를 이용하여 테일윈드 코드로 작성해도 된다.

다만 CSS in JS 방식으로 작성해야 하기 때문에

'@apply bg-purple-500': '',

이렇게 키 밸류를 맞추어 코드를 작성해줘야 한다.

3) variants 추가 및 custom variants 사용

1. variant 추가

variant를 쉽게 이해하기 위해서는 ‘조건’이라고 생각하면 쉽다.

예시)

// 다크모드일 경우 글씨 색상을 하얗게한다.
dark: text-white// 화면 사이즈가 768px이상일 경우 max-width는 28rem이다.
md: max-w-md

variant 바로 뒤에는 seperator가 붙는데 디폴트 seperator는 ‘:’이다(원한다면 변경할 수도 있다).

이 variant 또한 커스텀하여 사용 가능하다.

기본 제공 variants는 아래와 같다.

커스텀 variant

예시 1)

plugin(function ({ addVariant, e }) {
      addVariant('disabled', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`wow${separator}${className}`)}:disabled`;
        });
      });
    }),

‘wow:클래스이름’ 형태로 클래스 이름을 작성하면

클래스이름:disabled로 변환해주는 코드이다.

예시 2)

// Complex variants
    plugin(function ({ addVariant }) {
      addVariant('important', ({ container }) => {
        container.walkRules((rule) => {
          rule.selector = `.\\\\!${rule.selector.slice(1)}`;
          rule.walkDecls((decl) => {
            decl.important = true;
          });
        });
      });
    }),// 사용 예시
<span className="!text-red-500 md:!text-red-800">Complex variants</span>

‘!:테일윈드코드’ 형태로 클래스 이름을 작성하면

!뒤에 작성한 테일윈드 코드 속성에 !important를 붙여주는 코드이다.

2. custom variants 사용

custom variants를 사용하는 방법은 두 가지가 있다.

2.1) tailwindcss.config.js를 수정하는 방법

variant에 영향을 받는 속성을 추가하고 싶다면,

tailwindcss.config.js의 variant 줄에 코드를 추가해주면 된다.

예시)

backgroundColor: ['active']

기본적으로 active가 variant일 때 자동적으로 background-color를 변경하는 기능을 제공하지 않는다. 하지만 위의 코드를 추가하면 active:를 variant로 쓸 때 background-color를 변경할 수 있는 옵션을 사용할 수 있다.

2.2 css파일에 @variant를 통해 속성을 추가하는 법

예시)

@variants group-hover, hover, focus, active {
  .banana {
    color: yellow;
  }
}// 사용예시)
// 글씨 색상이 노란색으로 나온다.
<span className="banana">banana</span> 
// 글씨 색상은 하얀색이지만 호버 시 노란색이 된다.
<span className="hover:banana text-white">banana hover</span> 
// 글씨 색상은 하얀색이지만 액티브 상태일 때 노란색이 된다.
<button className="active:banana text-white">banana active</button>

3.7 그 외 코드 반복을 줄이는 법

1) @apply

반복해서 사용하는 테일윈드 코드를 묶어서 사용할 수 있도록 해준다.

예시)

.container {
    @apply min-h-content uppercase flex flex-col justify-center items-center font-playfair;
}

2) 스타일드 컴포넌트와 함께 사용

스타일드 컴포넌트와 함께 사용하기 위해서는 사전에 설정해야 하는 것들이 있다(스타일드 컴포넌트 다운로드 등, 하위 내용 참조).

참고한 링크:

https://www.freecodecamp.org/news/how-to-style-your-react-apps-with-less-code-using-tailwind-css-and-styled-components/

*CRA, tailwind가 이미 설정되었다는 가정 하에 아래 세팅을 진행한다.

yarn add -D tailwindcss twin.macro autoprefixer babel-plugin-macros postcss-cli

babel.plugin.js 파일 생성 후 아래 코드를 작성한다.

: 이 파일을 통해 태일윈드로 작성한 클래스들이 CSS-in-JS로 변환된다.

( this helps to transform Tailwind classes into CSS-in-JS code.)

module.exports = {
  tailwind: {
    plugins: ["macros"],
    config: "./src/tailwind.config.js",
    format: "auto",
  },
}

설정이 끝났다면 아래와 같이 CSS를 작성하여 사용하면 된다.

import styled from 'styled-components';
import tw from 'twin.macro';export const Container = styled.section.attrs({
  className:
    'min-h-body uppercase flex flex-col justify-center items-center font-libre',
})``;export const BackDrop = styled.div.attrs({
  className: 'absolute top-0 bg-black opacity-25 min-h-screen w-screen',
})``;
export const TestResponsiveStyled = styled.div.attrs({
  className: 'text-white md:text-pink-500',
})``;**// nested 속성 코드도 작성 가능하다.**
export const TestStyled = styled.div.attrs({
  className: 'text-white',
})`
  & {
    :hover + .hamburgerList {
      ${tw`block`}
    }
  }
`;

4. 테일윈드를 사용하여 만든 간단한 웹페이지 시연

깃헙링크: https://github.com/NAMU1105/tailwindcss/tree/master

리액트와 테일윈드를 사용하여 간단한 로그인, 회원가입 페이지 구현

5. 기타

1) Tailwind CSS IntelliSense(테일윈드 자동완성 플러그인)

html 클래스명 안에 테일윈드 클래스 요소 자동완성 기능 제공해주는 플러그인

중복되는 css속성을 가진 클래스명을 썼을 경우 경고를 해준다는 장점도 있지만,

존재하지 않는 클래스명을 쓰거나 오탈자가 나는 등의 문제점에 대한 경고는 주지 못한다는 단점이 있다.

2) 오피셜 플러그인

1. Typography

https://github.com/tailwindlabs/tailwindcss-typography

테일윈드는 브라우저가 제공하는 기본 css속성을 모두 삭제하기 때문에 h2, b같은 태그들도 모두 동일하게 보인다.

이런 점이 불편한 사람들을 위해 제공하는 플러그인으로 기본 브라우저 제공 스타일을 더 보기 좋게 가공하였다.

‘prose’ 클래스를 이용하여 사용할 수 있다.

<article class="prose lg:prose-xl">
  <h1>Garlic bread with cheese: What the science tells us</h1>
  <p>
    For years parents have espoused the health benefits of eating garlic bread with cheese to their
    children, with the food earning such an iconic status in our culture that kids will often dress
    up as warm, cheesy loaf for Halloween.
  </p>
</article>

예시 1)

플러그인을 적용하기 전

플러그인 적용 후

예시 2)

2. Forms

https://github.com/tailwindlabs/tailwindcss-forms

The @tailwindcss/forms plugin adds an opinionated form reset layer that makes it easier to style form elements with utility classes.

폼 엘러먼트들의 커스터마이제이션을 더 쉽게 해준다.

3. Line-clamp

https://github.com/tailwindlabs/tailwindcss-line-clamp

사용자가 원하는 줄 수만큼만 보여주는 기능을 제공한다.

<p class="line-clamp-3 md:line-clamp-none">
  Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis
  dolor debitis natus. Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate
  possimus et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>

4. Aspect ratio

https://github.com/tailwindlabs/tailwindcss-aspect-ratio

화면 비율을 원하는대로 맞춰주는 플러그인이다.

아래 사진의 ‘LOG’ 글자를 기준으로 보면 사이즈 및 비율이 다르게 나오는 것을 볼 수 있다.

<div class="aspect-w-16 aspect-h-9">
  <iframe src="<https://www.youtube.com/embed/dQw4w9WgXcQ>" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

3) 리액트 jsx내에서의 활용

미리 완벽하게 필요한 모든 레이아웃이나 컴포넌트들을 만들어 두기는 어렵다.

또한 리액트(jsx)에서 props에 따른 유연한 UI를 만들고 싶다면 JS에서의 컨트롤이 필요로 할 수 있다.

리액트(jsx)에서 props에 따라 CSS속성을 변경하고 싶다면,

테일윈드 측에서 작성한 좋은 예시를 참고하여 코드를 작성하면 좋을 것 같다.

https://gist.github.com/RobinMalfait/490a0560a7cfde985d435ad93f8094c5

4) 공식사이트 제공 테일윈드 사용 예제

아래 링크에서 테일윈드 측이 만들어둔 간단한 디자인 및 코드를 참고해도 좋을 것 같다.

https://tailwindui.com/preview

(아래 사진과 같이 게시판, 정보 입력 화면 등의 디자인 및 코드를 제공하고 있다.)

Tailwind 소개 및 사용법

1. 테일윈드 소개 및 설치방법

1) 소개

2) 설치 방법

2. 테일윈드의 장점

3. customization

3.1 반응형

2) 반응형 작업

3.2 다크모드

3.3 컬러, 폰트, 단위 등

1) 컬러

2) 폰트

3) 사이즈

3.4 애니메이션

3.5 아이콘

3.6 Plugin 커스텀

1) custom utilities 사용

2) custom components 사용

3) variants 추가 및 custom variants 사용

3.7 그 외 코드 반복을 줄이는 법

1) @apply

2) 스타일드 컴포넌트와 함께 사용

4. 테일윈드를 사용하여 만든 간단한 웹페이지 시연

5. 기타

1) Tailwind CSS IntelliSense(테일윈드 자동완성 플러그인)

2) 오피셜 플러그인

3) 리액트 jsx내에서의 활용

4) 공식사이트 제공 테일윈드 사용 예제

Written by Namu CHO

No responses yet