# [react]테일윈드 css 리액트 프로젝트 만들기

2025. 2. 19. 17:01ㆍ개발/React

3.2 테일윈드 css 리액트 프로젝트 만들기

1. tailwind CSS 사용

(1) postCSS, autoprefixer, 테일 윈드 설치

✅ 2025.2월 18일 더이상 tailwind v4 는 init 명령이 존재하지 않는다. 이전 버전을 설치해야
.bin 에 tailwind 가 생긴다.
참고 npx tailwindcss init -p를 실행할 수 없습니다 - "실행할 실행 파일을 결정할 수 없습니다

npm install -D tailwindcss@3 postcss autoprefixer
npm install -D postcss autoprefixer
# npm install -D tailwindcss @tailwindcss/vite

npm 할때마다 package.json 에 잘설치됬는지 확인 필요

postcss 와 테일윈드가 동작하려면 각각의 구성파일 필요

(2) 구성 파일 생성

테일윈드는 postcss 의 플러그인 형태로 동작.
postcss.config.js 파일에 테일윈드를 등록해야함.
vite.config.ts 에 tailwind 플러그인을 추가 해준다.

src/vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
})

📌 테일윈드 사이트 참고

postcss.config.js, tailwind.config.js 파일을 체크

(3) daisyui 패키지 설치하기

무료제공 컴포넌트가 자장 많은 daisyui 플러그인 을 설치

npm i -D daisyui

(4) @tailwindcss/line-clamp 플러그인 설치

npm i -D  @tailwindcss/line-clamp

(5) 테일윈드 구성 파일 수정

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx",
  ],
  theme: {
    extend: {},
  },
  safelist: [{pattern: /^line-clamp-(\d+)$/}],
  plugins: [
    require('@tailwindcss/line-clamp'),
    require('daysui')
  ],
}

(6) 테일윈드 css 기능 반영

src/index.css


/* 테일윈드 css 기능 반영 */
@tailwind base;
@tailwind components;
@tailwind utilities;

2025.02.19 TIL

(7) tailwind 테스트 코드 작성

🚶‍♂️ Vite + react + Tailwindcss 4

2025.1.22 일 이후 tailwind 4.0 이 발표되면서 설치와 실행이 매우 간단해졌다.

(1) vite 프로젝트 생성, tailwind 설치

## basic setting check 
node -v # 22.14.0
npm -v # 10.9.2

## 
npm create vite@latest my-tailwind-app --template
cd my-tailwind-app
npm install tailwindcss @tailwindcss/vite

아직 npm run dev 를 하면 안된다..

(2) vite.config.js 에 플러그인 추가

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss()
  ],
})

(3) App.css 에 tailwind import

/src/App.css

@import "tailwindcss";

(4) App.tsx 에서 tailwind style 적용하기

/src/App.tsx

      <h1 className='text-red-600'>Vite + React</h1>
      <h1 className="text-3xl font-bold text-blue-600 underline">
        Hello world!
      </h1>

npm run dev

실행 결과

느낀점

하아.. 정말 많이 돌아왔다. 그냥 최신 사이트에서 있는 그대로 글을 한번 읽어보고 유튜브에 나온거 따라하면 5분안에 해결될일은 오래전의 책을 따라하다가 gpt 와씨름하고 버전이 다른걸 하루만에 깨닫고 맨붕으로 3시간을 날리고. 프로젝트를 지웠다 다시 시작하기를 5번.. 이게 무슨 짓이란 말인가.
그냥 영어를 읽자. 그게 제일 빠르다.


npm i  chance luxon
npm i -D @types/chance @types/luxon 

## daisyui plugin install 
npm i -D daisyui
npm i -D @tailwindcss/line-clamp
npm install @fontsource/material-icons
npm install -D @fontsource/material-icons

(5) Tailwindcss.tsx 작성

src/pages/Tailwindcss.tsx

import * as D from '../data'
export default function Tailwindcss() {
    return (
        <>
        <div className='bg-black/70'>
            <p className='w-full p-4 text-3xl text-white'>Tailwindcss</p>
            <p className='italic text-gray-50 line-clamp-3'>{D.randomParagraphs(10)}</p>
            <button className='btn btn-primary' style={{textTransform: 'none'}}>
                Button
            </button>
        </div>        
        </>
    )
}

(6) index.html 에 bootstrap 추가

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/src/styles.css" rel="stylesheet">

    <!-- Bootstrap CSS-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>Vite + React + TS</title>

  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

(7) index.css 수정

/source/index.css


/* 구글 폰트 임포트 */
/* @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); */

/* 패키지 방식 구글 폰트 임포트 */

.material-icons {
  font-family: 'Material Icons';
  display : inline-block;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

-line clamp 3 은 길어도 3줄을 넘지말라는 것.

ℹ️ 참고

📼 youtube, 2025 How to Set up Tailwind CSS V4 4.0 | Install Tailwind CSS v4 in Vite React |TailwindCSS setup

2.📚 Do it! 리액트로 웹앱 만들기

2. 색상 설정 하는 방법

CSS 는 이름에 'color' 가 들어가는 몇가지 스타일 속성을 제공함.

background-color 스타일 속성은 바탕색
color : 택스트 섹상
border-color : 경계 색상.

(1) 색상 모델과 rgb, hsl 함수

rgb hsl

CSS opacity 스타일 속성

불투명도 알파값. 0 완전투명 1완전 불투명
ex: background-color : rgb(0,0,0,0.4)

tailwind css 색상 클래스

bg-black/70, text-white, text-gray-50

무채색 이름 규칙
접두사-색상명/불투명도

유채색 이름 규칙
접두사-색상_이름-채도/불투명도

접두사 종류
bg; 배경색
text: 텍스트 색상
border: 경계
빨강, 파랑 등 유채색은 채도 개념이 도입되어
text-gray-50 처럼 '접두사-색상-채도/불투명도' 형태의 이름을 가진 클래스 제공
색상의 채도 는 50,100,200,300,400,500,600,700,800,900 등 10개번호로 세분함.
회색은 gray-50, gray-100,grey-900 같은 이름을 가짐. 숫자가 클수록 어두움
불투명도는 20~100 사이 5의 배수 숫자로 제한됨

Color.tsx 테스트

// src/pages/Color.tsx

export default function Color() {
    return (
        <div className="p-4 bg-sky-700">
            <p className="w-full p-4 text-3xl text-white">Color</p>
            <p className="text-white">Email address</p>
            <input type="email" className="text-gray-900 border-4 border-sky-200"/>
            <p className="text-rose-500"> This field is required</p>

        </div>
    )
}

실행결과

3. 텍스트를 설정하는 방법

CSS 는 길이를 표현할때 픽셀 단위 사용
몇글자 정도의 길이와 같은 표현에는 적합하지 않음.
문자 20개 정도의 길이로 표현 하는게 자연스러움.
영문자 M 을 의미하는 'em' 과 root M 으 ㄹ의미하는 rem 이라는 단위를 제공함.
rem 은 html, body 에 설정된 기본글꼴을 기준으로 'M' 문자 한개의 높이를 의미함.

글자 크기 설정하기

font-size, line-height 라는 스타일 속성을 제공함.
font-size : 글꼴 크기 , 글자의 높이
텍스트는 어느 정도 공간을 가지고 떨어져 있어야 보기 편함.
line-height 는 글자의 높이 font-size + 여분의 높이 를 설정하는 속성
h1~h6 , p 요소에 각기다른 font-size와 line-height 값을 기본으로 설정됨.
웹브라우저마다 이 기본 설정값이 조금씩 다름.

테일윈드는 기본으로 설정된 글자 크기를 모두 초기화함. 글자크기를 설정하는 클래스를 ㅔㅈ공하여 태그와 상관없이 글자 크기를 조절할수 있게 해줌.

className	font-size(rm)	line-hight(rm)
text-xs	0.75	1
text-sm	0.875	1.25
text-base	1	1.5
text-lg	1.125	1.75
text-xl	1.25	1.75
text-2xl	1.5	2
text-3xl	1.825	2.25
text-4xl	2.25	2.5
text-5xl	3	1

글자 굴기 설정하기

font-weight 스타일 속성

className	font-weight
font-thin	: 100;
font-light	: 300;
font-normal	: 400;
font-medium	: 500;
font-bold	: 700;
font-black	: 900;

글자 기울임 꼴

className	font-style
italic	: italic;
normal-italic	: normal;

줄바꿈 문자 설정하기

\n 은 html 에서는 white space 로 간주되어 무시도미.
테일윈드는 white space 를 어떻게 처리할지 설정할수 있음.
\n 을 줄바굼으로 동작하게 하려면
whitespace-pre-line 을 사용하면 됨

텍스트 정렬

className	text-align
text-left	: left;
text-center	: ceter;
text-right	: right;
text-justify	: justify;

텍스트 표시 줄 수 조절

@tailwindcss/line-clamp 플러그인 으로 'line-clamp-숫자' 형태의 클래스 제공

텍스트 관련 컴포는트 구현

만약 Title 이라는 componenet 가 있다면 편할 것임.
<Title className="text-blue-600">Hello</Title>

제목, 부제목, 요약, 본문 => title, subtitle, summary, paragraph 컴포넌트로 만든다.

cd src/components 
touch textUtil.ts Text.tsx

src/components/textUtil.tsx

//prettier-ignore

// src/components/textUtil.ts
export const makeClassName = (setting:string,
    _className?: string,
    numberOfLines?: number) => 
[ setting,
    numberOfLines ? `line-clamp-${numberOfLines}` : '',
    _className
].join(' ')

// ex: font-bold text-5xl text-center whitespace-pre-line

TextsTest 파일 작성하여 테스트

src/pages/TextsTest

// src/pages/TextsTest
console.log("textTEst 실행 ")
import * as D from '../data'

import {Title, Subtitle, Summary, Paragraph} from '../components'

const paragraphs =D.makeArray(2).map(D.randomParagraphs).join('\n\n')
const summary = D.makeArray(3).map(D.randomSentence).join('\n')

export default function TextsTest() {
    return (
        <div>

            <Title>TextTest</Title>
            <div>
                <Subtitle className='text-blue-400'>{D.randomSentence()}</Subtitle>
                <p className="text-xl italic text-center text-gray-900 text-bold">
                    {D.randomName()}
                </p>
                <Paragraph numberOfLines={5}>{paragraphs}</Paragraph>
                <Summary className='text-center text-pink-400'>{summary}</Summary>
                <p className='text-center text-gray-500'>
                    {D.randomDayMonthYear()} ({D.randomRelativeDate()})
                </p>
            </div>
        </div>
    )
}

결과

'개발 > React' 카테고리의 다른 글

# [React] 1. Vite +react + typescript + tailwind Setting (1)	2025.02.19
#[React] 컴포넌트 CSS 스타일링 (0)	2025.02.10

개발자의 지혜와 노력

태그

최근글

댓글

공지사항

아카이브