Tailwind
이번에 Open API 페이지를 만들면서 CSS Framework 중 Tailwind css를 사용해보려 한다.
Tailwind css는 태그 내에서 쉽고 빠르게 스타일링이 가능하면서 일관된 디자인가능하게 해준다. 또한 class name 이나 styled-components 처럼 이름을 정하는 게 머리가 아팠다면 확실히 편하게 사용할 수 있을 것이다.
Install
처음으로 npm 서버에 install을 해주고,
npm install -D tailwindcsstailwind.config.js 파일을 만들어야 하는데 코드를 사용하면 자동으로 생성해준다.
npx tailwindcss init파일이 생성되면 js파일 내에 path를 설정해 줄 필요가 있다.
리액트나 타입스크립트를 사용하면 있다면 jsx / tsx 를 content에 추가해주자.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}이후 main css 파일에 Tailwind layer 를 추가.
@tailwind base;
@tailwind components;
@tailwind utilities;Tailwind CLI 를 빌드.
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch마지막으로 html 페이지에 link를 추가해주면 끝.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>복잡해보일 수 있지만, 막상 해보면 그렇게 어렵지 않다.
기존 css랑 코드가 다르니 다음에는 정리해서 포스팅해봐야 겠다.
오늘한줄.