반응형
📝Tailwind (테일윈드)
CSS 프레임워크로서 빠르게 퍼블리싱을 할 수 있게 도와줍니다
비슷한 프레임워크로 BootStrap이 있습니다 현재는 BootStrap을 제치고 현재 1위 CSS 프레임워크입니다
그냥 Next.js를 사용하고 Next.js에서 기본적으로 채용한 Tailwind를 사용하는게 맘 편하다
📝React Tailwind 적용
React 프로젝트 생성 (타입스크립트 포함 버전)
// 프로젝트 생성
npx create-react-app my-react-app --template typescript
// 프로젝트로 이동
cd my-react-app
tailwind package 설치
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
tailwind.config.js 수정
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
공통 CSS 파일을 만들어 tailwind 적용시키기
// src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
공통 CSS 파일 import 해서 사용하기
import './index.css'
....
🔗 참고 및 출처
https://velog.io/@ahn0min/create-react-app에서-Tailwind-CSS-적용해보기
create-react-app에서 Tailwind CSS 적용해보기
필자는 create-react-app 과 Tailwind를 사용하는 방식에 맞게 작성하였다.create-react-app을 사용하여 기본적인 개발환경을 직접 구축할 필요없이 편리하게 사용하겠다.css framework인 tailwind를 사용하기위
velog.io
https://tailwindcss.com/docs/installation
Installation - Tailwind CSS
The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.
tailwindcss.com
반응형