[CSS] Tailwind

Davina·2022년 12월 20일

CSS

목록 보기

1/8

Tailwind란?

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

HTML을 떠나지 않고 빠르게 빌드하는 모던 웹사이트
utility-first 기법 사용 → 미리 구현된 css를 class에 불러와서 사용!
장점
- HTML문서만 보고 작업 가능
- 클래스 이름 고민할 필요가 없음
- 유지보수에도 용이
예시
- <head>에 <script src="https://cdn.tailwindcss.com"></script> 으로 불러와서 사용 방법
- body에 작성하여 응용

<!--space-y-4: 각 요소의 간격-->
<!--bd-red-200: red color 숫자가 높을수록 진해짐-->
<!--shadow: 그림자, rounded: radius-->
<div class="space-y-4 bg-blue-300">
	<div class="w-96 bg-white shadow rounded">w-96</div> //모서리가 조금 깎임
</div>
<div class="text-red-500">hello world</div>
<div class="text-lg">hello world</div>
<div class="text-2xl">hello world</div>
<div class="text-2xl mx-3">hello world</div>

<!--사용자화 = 대괄호 사용-->
<div class="bg-[#4267B2] text-white">hello world</div>

⭐ 단축키
option+cmd+화살표키 ⇒ 원하는 방향만큼 줄 모두 선택
.text-2xl + tab ⇒ <div class=”text-2xl”></div> 만들어짐

⭐ VSC 지원 확장자
Tailwind CSS IntelliSense → 자동완성 기능

React에서 Tailwind사용법

1. create-react-app v5.0+에서 작동

npx create-react-app my-project
cd my-project

2. Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

npm add -D package: 필요한 패키지를 install 한다.
npm tailwind init -p : tailwind.config.js & postcss.config.js파일을 생성

3. tailwind.config.js 설정

npm tailwind init -p 을 통해 자동으로 tailwind.config.js 파일 생성

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

src 하위 파일 중 확장자가 .js, .jsx, .ts, .tsx인 파일을 대상으로 한다. (html / react component 등)

3-1. (필수..?)postcss.config.js 설정

tailwind css를 사용하기 위해 우리가 아는 css로 변환해주는 전처리기 설정

postcss.config.js

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

4. css에 tailwind 적용하기

./src/index.css

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

5. start your build process

terminal

npm run start

6. start using Tailwind!

index.js

React의 시작 entry인 index.js에서 tailwind.css를 import한다

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./tailwind.css";

ReactDOM.render(<App />, document.getElementById("root"));

./src/App.js

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

import React from "react";

const App = () => {
  return (
    <div className="bg-blue-300 p-40">
      <h1 className="text-3xl font-bold underline text-center">
        TailWind Test
      </h1>
    </div>
  );
};

export default App;

Webpack loader설정

Webpack을 직접 구성한다면 TailWind를 사용하기 위해 style-loader, css-loader, postcss-loader가 필요하다.

terminal

npm install --save-dev style-loader css-loader postcss-loader

webpack.config.js

module: {
    rules: [
		...
      {
        test: /.css?$/,
        exclude: [],
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
		...
    ],
},

FLOWBITE tailwind css 참조 사이트
tailwind test board

Davina

[많을 (다) 빛날 (빈)] 빛이나는 사람이 되고 싶습니다

다음 포스트