Tailwind

유틸리티 기반의 CSS 프레임워크

•

Tailwind vs Boostrap

•

사용 방법

CDN 방식

Node.js CLI 방식

React 세팅

•

기본 사용

◦

메인 화면

◦

로그인 화면

Tailwind vs Boostrap

항목	Tailwind CSS	Bootstrap
스타일링 접근 방식	유틸리티 클래스 기반	컴포넌트 기반
커스터마이징	설정 파일을 통한 유틸리티 클래스 확장 및 수정	SCSS 변수와 믹스인으로 커스터마이징 가능
미리 정의된 컴포넌트	없음	버튼, 카드, 네비게이션 바 등 제공
CSS 파일 크기	JIT 모드로 실제 사용된 클래스만 빌드	기본적으로 모든 스타일 포함
반응형 디자인	반응형 유틸리티 클래스 (sm:, md:, 등)	미디어 쿼리 기반 클래스 (col-md-6 등)
학습 곡선	유틸리티 클래스의 조합을 익혀야 함	컴포넌트 사용법을 배우기 쉬움
디자인 시스템	직접 구축 필요	프리셋 스타일 제공
사용 사례	맞춤형 디자인, 디자인 시스템 구축에 적합	일관된 스타일 유지, 빠른 초기 개발에 적합
반응형 그리드 시스템	유틸리티 클래스 조합	12-컬럼 그리드 시스템
상태 변형 지원	상태별 유틸리티 클래스 (호버, 포커스 등)	상태별 유틸리티 클래스 제공
다크 모드 지원	유틸리티 클래스 제공	직접 구현 필요

사용 방법

CDN 방식

Node.js CLI 방식

React 세팅

CDN 방식

tailwindcssTry Tailwind CSS using the Play CDN - Tailwind CSS

Try Tailwind CSS using the Play CDN - Tailwind CSS

Use the Play CDN to try Tailwind right in the browser without any build step.

https://tailwindcss.com/docs/installation/play-cdn

CDN script 추가

설정

코드

CDN script 추가

<script src="https://cdn.tailwindcss.com"></script>
HTML
복사

설정

<!-- 설정 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#262626',         
            secondary: '#38BDF8',  
          }
        }
      }
    }
  </script>
HTML
복사

코드

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- CDN script 추가 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 설정 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#262626',         
            secondary: '#38BDF8',  
          }
        }
      }
    }
  </script>
</head>
<body class="text-white flex flex-col items-center justify-center gap-10 min-h-screen">
    <div class="max-w-lg mx-auto bg-secondary p-6 rounded-lg shadow-md">
      <h1 class="text-2xl font-bold mb-4">Hello, Tailwind!</h1>
      <p>tailwind 설정으로 테마 컬러를 설정하고 사용해봅니다.</p>
      <button class="mt-4 bg-primary text-white py-2 px-4 rounded">Primary Button</button>
    </div>
    <div class="max-w-lg mx-auto bg-primary p-6 rounded-lg border shadow-md">
      <h1 class="text-2xl font-bold mb-4">Hello, Tailwind!</h1>
      <p>tailwind 설정으로 테마 컬러를 설정하고 사용해봅니다.</p>
      <button class="mt-4 bg-secondary text-white py-2 px-4 rounded">Secondary Button</button>
    </div>
</body>
</html>
HTML
복사

Node.js CLI 방식

tailwindcssInstallation - Tailwind CSS

Installation - Tailwind CSS

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.

https://tailwindcss.com/docs/installation

tailwind 설치

tailwind.config.js 설정 파일 생성

tailwind.config.js 설정

input.css 작성

output.css 빌드

html 작성

tailwind 설치

npm install -D tailwindcss
Bash
복사

tailwind.config.js 설정 파일 생성

npx tailwindcss init
Bash
복사

tailwind.config.js 설정

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        primary: '#262626',         
        secondary: '#38BDF8',  
      }
    }
  },
  plugins: [],
}
JavaScript
복사

input.css 작성

다음 지시자를 사용하여, tailwind 의 스타일 레이어를 추가합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;
CSS
복사

•

@tailwind base;:

◦

이 지시어는 Tailwind의 기본 스타일을 포함합니다. 기본 스타일은 브라우저의 기본 스타일을 리셋하고, 일관된 기초 디자인을 제공하기 위해 사용됩니다. 기본적으로는 스타일의 일관성을 유지하고 기본적인 타이포그래피 스타일을 설정하는 데 도움이 됩니다.

•

@tailwind components;:

◦

이 지시어는 Tailwind의 컴포넌트 스타일을 가져옵니다. Tailwind에서 컴포넌트는 자주 사용하는 스타일 세트를 말합니다. 예를 들어, 버튼, 폼, 알림 등의 스타일이 포함됩니다. 물론 자신만의 커스텀 컴포넌트를 정의할 수도 있습니다.

•

@tailwind utilities;:

◦

이 지시어는 Tailwind의 유틸리티 클래스를 포함합니다. 유틸리티 클래스는 HTML 요소에 직접 적용하여 스타일을 지정하는 낮은 수준의 클래스들입니다. 예를 들어, 패딩, 마진, 텍스트 색상, 배경 색상 등의 스타일을 설정할 수 있는 클래스들입니다.

output.css 빌드

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
Bash
복사

html 작성

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 빌드된 CSS 포함하기 -->
  <link href="./output.css" rel="stylesheet">

</head>
<body class="text-white flex flex-col items-center justify-center gap-10 min-h-screen">
    <div class="max-w-lg mx-auto bg-secondary p-6 rounded-lg shadow-md">
      <h1 class="text-2xl font-bold mb-4">Hello, Tailwind!</h1>
      <p>tailwind 설정으로 테마 컬러를 설정하고 사용해봅니다.</p>
      <button class="mt-4 bg-primary text-white py-2 px-4 rounded">Primary Button</button>
    </div>
    <div class="max-w-lg mx-auto bg-primary p-6 rounded-lg border shadow-md">
      <h1 class="text-2xl font-bold mb-4">Hello, Tailwind!</h1>
      <p>tailwind 설정으로 테마 컬러를 설정하고 사용해봅니다.</p>
      <button class="mt-4 bg-secondary text-white py-2 px-4 rounded">Secondary Button</button>
    </div>
</body>
</html>
HTML
복사

React 세팅

React 프로젝트 생성

tailwind 설치

tailwind.config.js 설정 파일 생성

tailwind.config.js 설정

index.css 작성

프로젝트 빌드

컴포넌트 작성

React 프로젝트 생성

npx create-react-app tailwind-app
cd tailwind-app
Bash
복사

tailwind 설치

npm install -D tailwindcss
Bash
복사

tailwind.config.js 설정 파일 생성

npx tailwindcss init
Bash
복사

tailwind.config.js 설정

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: '#262626',         
        secondary: '#38BDF8',  
      }
    }
  },
  plugins: [],
}
JavaScript
복사

index.css 작성

/* tailwind 지시자 추가 */
@tailwind base;
@tailwind components;
@tailwind utilities;


/* index.css 기본 코드 */
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;
}
CSS
복사

프로젝트 빌드

npm run start
Bash
복사

컴포넌트 작성 - App.js

import React from 'react';

const App = () => {
  return (
    <div className="text-white flex flex-col items-center justify-center gap-10 min-h-screen">
      <div className="max-w-lg mx-auto bg-secondary p-6 rounded-lg shadow-md">
        <h1 className="text-2xl font-bold mb-4">Hello, Tailwind!</h1>
        <p>tailwind 설정으로 테마 컬러를 설정하고 사용해봅니다.</p>
        <button className="mt-4 bg-primary text-white py-2 px-4 rounded">Primary Button</button>
      </div>
      <div className="max-w-lg mx-auto bg-primary p-6 rounded-lg border shadow-md">
        <h1 className="text-2xl font-bold mb-4">Hello, Tailwind!</h1>
        <p>tailwind 설정으로 테마 컬러를 설정하고 사용해봅니다.</p>
        <button className="mt-4 bg-secondary text-white py-2 px-4 rounded">Secondary Button</button>
      </div>
    </div>
  );
};

export default App;
JavaScript
복사

기본 사용

•

기본 설정

•

메인 화면

•

로그인 화면

기본 설정

•

프로젝트 생성

•

tailwind 

•

react-router

•

프로젝트 구조

•

컴포넌트

프로젝트 생성

npx create-react-app basic-app
Bash
복사

tailwind

npm install -D tailwindcss
npx tailwindcss init
Bash
복사

react-router

npm install react-router-dom
Bash
복사

프로젝트 구조

컴포넌트

•

Header.jsx

•

Footer.jsx

Header.jsx

import React from 'react';
import { Link } from 'react-router-dom';

const Header = () => {
  return (
    <header className="bg-gray-800 text-white p-4">
      <div className="container mx-auto flex justify-between items-center">
        <Link to="/"><h1 className="text-xl font-bold">ALOHA CLASS</h1></Link>
        <nav>
          <Link to="/" className="mx-2 hover:underline">Home</Link>
          <Link to="/login" className="mx-2 hover:underline">Login</Link>
        </nav>
      </div>
    </header>
  );
};

export default Header;
JavaScript
복사

Footer.jsx

import React from 'react';

const Footer = () => {
  return (
    <footer className="bg-gray-800 text-white p-4">
      <div className="container mx-auto text-center">
        <p>&copy; 2024 ALOHA CLASS. All rights reserved.</p>
      </div>
    </footer>
  );
};

export default Footer;
JavaScript
복사

메인 화면

•

Main.jsx

import React from 'react'
import Header from '../components/Header'
import Footer from '../components/Footer'
import { Link } from 'react-router-dom'

const Main = () => {
  return (
    <div className='min-h-screen flex flex-col'>
      <Header />
      <main className="flex-1 container">
        <Section />
      </main>
      <Footer />
    </div>
  )
}

export default Main


export const Section = () => {
  return (
    <section className="p-40 shadow-lg">
      <div className="container mx-auto text-center">
        <h2 className="text-3xl font-bold mb-4">메인 화면</h2>
        <p className="mb-6">안녕하세요~! React x Tailwind 기본 프로젝트입니다.</p>
        <Link to="/login">
          <button className="bg-yellow-400 text-gray-800 py-2 px-6 rounded-lg hover:bg-yellow-500">
            Login
          </button>
        </Link>
      </div>
    </section>
  )
}
JavaScript
복사

로그인 화면

•

Login.jsx

import React from 'react';
import Header from '../components/Header';
import Footer from '../components/Footer';

const Login = () => {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="flex-1 flex items-center justify-center bg-gray-100">
        <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-sm">
          <h2 className="text-2xl font-bold mb-6 text-center">Login</h2>
          <form>
            <div className="mb-4">
              <label htmlFor="username" className="block text-sm font-medium text-gray-700">아이디</label>
              <input
                type="text"
                id="username"
                name="username"
                required
                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                placeholder="아이디를 입력하세요."
              />
            </div>
            <div className="mb-6">
              <label htmlFor="password" className="block text-sm font-medium text-gray-700">비밀번호</label>
              <input
                type="password"
                id="password"
                name="password"
                required
                className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                placeholder="••••••••"
              />
            </div>
            <button
              type="submit"
              className="w-full py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
            >
              로그인
            </button>
          </form>
        </div>
      </main>
      <Footer />
    </div>
  );
};

export default Login;
JavaScript
복사

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import './index.css';
import Main from './pages/Main';
import Login from './pages/Login';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router>
    <Routes>
      <Route path="/" element={<Main />} />
      <Route path="/login" element={<Login />} />
    </Routes>
  </Router>
);
JavaScript
복사