[React] tailwindcss 설치하기

프론트엔드

---

 

테일윈드 CSS란?

테일윈드 CSS(Tailwind CSS)**는 HTML, CSS, JavaScript로 구축된 웹 프로젝트의 스타일을 손쉽게 관리할 수 있도록 도와주는 CSS 프레임워크입니다.
테일윈드 CSS는 전통적인 CSS 프레임워크와는 다르게 클래스 기반의 스타일링을 채택하여 개발자가 직접 스타일을 작성하는 대신 미리 정의된 클래스를 사용하여 스타일을 적용할 수 있습니다.

 

 

테일윈드의 장단점

장점

• 생산성 향상 : css 스타일 정의를 효과적으로 줄여주므로 빠른 스타일 적용이 가능합니다.
• 유틸리티 클래스 : 테일윈드는 여러가지 기본 유틸리티 클래스를 제공해 다양한 스타일링 처리가 쉽습니다.
• 설정 가능한 유연성 : 환경별로 설정을 변경할 수 있는 유연성을 제공합니다.

단점

• 의존성과 커스터마이징의 어려움 : 기존의 스타일을 정의하는 방식은 의존이 가능하나 독립적으로 사용되므로 의존이 힘듭니다. 각 스타일별 개별적인 작성이 필요합니다.
• 파일 크기 증가 : 클래스 속성이 길어지면 HTML 파일의 크기가 증가할 수 있습니다.
• 가독성 하락 : 여러가지 스타일의 클래스가 나열되면 가독성이 저하됩니다.

 

 

NPM으로 리액트에서 테일윈드 설치하기

 

패키지 설치

[bash]

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

 

 

웹팩 설치

$ npm install webpack webpack-cli --save-dev

 

 

 webpack.config.js 생성

[루트 디렉토리/webpack.config.js]

module.exports = {
    module: {
        rules: [
            {
                test: /\.css?$/,
                use: ['style-loader', 'css-loader', 'postcss-loader'],
                exclude: ['/node_modules/'],
            },
        ],
    },
};

 

 

tailwind init

[bash]

$ npx tailwindcss init

 

명령어 입력 시 tailwind.config.js 파일이 루트 디렉토리에 생성된다.

 

 

tailwind.config.js content 수정

[루트 디렉토리/tailwind.config.js]

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

 

 

postcss.config.js 생성 후 작성

[루트 디렉토리/postcss.config.js]

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

 

 

main.css 생성 후 작성

[루트 디렉토리/src/main.css]

@tailwind base;
@tailwind components;
@tailwind utilities

 

 

index 파일에 main.css import

[루트 디렉토리/index.js, index.tsx, index.tx, index.jsx]

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './main.css'; // 추가

 

 

 

---