테일윈드

출처

Tailwind CSS는 Atomic CSS 의 개념을 단순화 하여 개발자가 마크업에 일부 클래스를 추가하여 UI 스타일을 지정할 수 있도록 합니다. 그리고 새로운 JIT 컴파일러와 함께 제공되는 성능 향상으로 Tailwind CSS는 개발자들이 가장 좋아하는 것이 되었습니다.

Vite는 또한 번들링 프로세스를 단순화하지만 기존 번들러와는 다른 접근 방식을 취합니다. Vite는 네이티브 JavaScript 모듈을 활용하고 후드 아래에서 esbuild를 활용하여 즉각적인 개발 서버 시작 시간과 초고속 번들링을 제공합니다.

Vite와 Tailwind CSS는 모두 단순성, 성능 및 개발자 경험에서 탁월합니다.

tailwind설정

설치

$ npm install -D tailwindcss postcss autoprefixer

tailwind.config.cjs생성

$ npx tailwindcss init

tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.cjs

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

index.css

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

비교

.App {
  background-color: rgb(36, 40, 46);
  /* bg-indigo-800  */
}

.container {
  max-width: 80rem;
  margin: 0 auto;
  /* max-w-7xl mx-auto */
}

h1 {
  padding: 2.5rem 0;
  color: white;
  font-size: 5rem;
  /* py-10 text-white text-7xl */
}

.characters {
  display: flex;
  flex-wrap: wrap;
  /* flex,  flex-wrap */
}

.card {
  width: 47%;
  background: rgb(59, 62, 67);
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 1rem;
  margin-right: 1rem;
  display: flex;
  /* w-5/12 bg-gray-700 rounded-lg  overflow-hidden mr-4 mb-4 flex*/
}

.card img {
  width: 15rem;
  height: 100%;
  /* w-60 h-full */
}

.loading {
  background-color: rgb(36, 40, 46);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* bg-indigo-800 h-screen flex items-center justify-center */
}

.loading h3 {
  color: white;
  font-size: 7.5rem;
  /* text-white text-9xl */
}

.text-container {
  padding: 1rem;
  color: white;
  font-size: 1.25rem;
  /*p-4 text-white text-2xl */
}

.text-container h3 {
  font-size: 2rem;
  /* text-4xl */
}

.status {
  margin-bottom: 1rem;
  /* mb-4 */
}

.title {
  color: grey;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  /* text-gray-300 text-2xl mb-2 */
}

button {
  padding: 1rem 4rem;
  /* pt-4 pb-16 */
  font-size: 2rem;
  margin: 2rem 0;
  /* mt-8 */
  margin-right: 1rem;
  /*pt-4 pb-16  mt-8 mr-4 */
}

import React from 'react'

function Character({ character }) {
  return (
    <div className="w-5/12  bg-gray-700 rounded-lg overflow-hidden mr-4 mb-4 flex">
      <img className="w-60 h-full" src={character.image} alt={character.name} />
      <div className="p-4 text-white text-2xl">
        <h3>{character.name}</h3>
        <p className="mb-4">
          {character.status} - {character.species}
        </p>
        <p className="text-gray-300 text-2xl mb-2">Last seen on</p>
        <p>{character.location.name}</p>
      </div>
    </div>
  )
}

export default Character