TIL.240308 Tailwind CSS

🖥️Tailwind CSS

Utility-First컨셉을 가진 CSS 프레임워크. Tailwind CSS경우 이러한 클래스명 고민을 하지않아도 되고 유틸리티 클래스명을 사용할수 있음.

Utility-First란 Tailwind CSS 메인컨셉으로써 클래스명을 별도로 정의하지않고 제공하는 유틸리티 클래스를 사용 하는게 특징

---

🤔사용법

html 태그에 class 혹은 react 라면 className이라고 적고 여기에 사용하고 싶은 CSS 속성을 적어주면 된다. 예를 들어 가장 많이 사용하는 가운데 정렬을 하고 싶다면 다음과 같이 적으면 된다.

<div class="flex justify-center items-center">
  <h1>Tailwind!!</h1>
</div>

1. Tailwind CSS IntelliSense 익스텐션

테일윈드 공식 익스텐션을 사용하면 자동 완성, 클래스명 호버 시 해당 클래스 명의 대한 클래스 속성 확인, 린팅 등의 기능을 제공하여 좀 더 편리하게 코드를 작성할 수 있다.

2. Prettier 플러그인

테일윈드 공식 prettier 플러그인을 사용하면 권장 순서에 따라 클래스를 자동 정렬할 수 있다.

3. Custom Styles

테일윈드는 다양한 색상과 px을 지원하고 있다. 하지만 프로젝트를 진행하다 보면 해당 컨셉에 맞는 디자인 가이드가 정해져 여러 컴포넌트에서 필요한 경우가 있다. 이럴 때 tailwind.config.js의 theme에 추가하여 사용할 수 있다. theme.extend.colors가 아닌 theme.colors에 추가하게 되면 기존 색상을 덮어쓰게 된다. (font-size의 경우 text-sm: 14px, text-base: 16px, text-lg: 18px을 제공)

💡tailwind 설정

• 패키지 설정

$ npm install -D tailwindcss postcss autoprefixer style-loader css-loader postcss-loader

• tailwind 초기화

$ npx tailwindcss init

명령어를 입력하면 tailwind 설정 파일인 tailwind.config.js 파일이 생성되는 것을 확인할 수 있다.

// tailwind.config.js

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

• content 설정

생성된 tailwind.config.js 파일을 보면 content 라는 설정 값이 보인다.
content에는 tailwind를 적용할 파일 경로를 넣어주면 되고 일반적으로 다음과 같이 넣어주면 모든 파일에 적용이 된다.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {},
    },
    plugins: [],
};

• postcss 설정

root 경로에 postcss.config.js 파일을 생성한 뒤 다음과 같이 코드를 작성하면 된다.

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

• main.css

/src 경로에 main.css 파일을 생성한 뒤 다음과 같이 코드를 작성하여 tailwind 지시문을 추가하면 된다.

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

그리고 해당 파일을 index 파일 등에 추가하여 전역적으로 적용될 수 있도록 한다.

// index.tsx

import React from 'react';
import ReactDom from 'react-dom';
import App from './App';
import './main.css';

ReactDom.render(<App />, document.querySelector('#root'));