Tailwind란 🤔
Tailwind CSS는 웹 개발을 위한 현대적이고 유연한 CSS 프레임워크입니다.
일반적인 CSS 프레임워크와는 다르게 사전에 정의된 클래스 이름을 사용하여 스타일을 적용하는 방식을 갖고 있습니다.
하지만 Tailwind CSS는 클래스 단위로 스타일을 직접 적용할 수 있는 유틸리티 기반의 CSS 프레임워크입니다.
예를 들어, Tailwind CSS에서는 bg-blue-500, text-white, p-4와 같은 클래스를 사용하여 배경색, 텍스트 색상, 패딩 등을 직접 지정할 수 있습니다. 각 클래스는 특정한 스타일 속성과 값에 매핑되어 있어, 필요한 스타일을 조합하여 빠르게 적용할 수 있습니다.
= 그러니까 한마디로 별도의 css 파일 작성할 필요없이, 클래스명으로 css를 설정할 수 있는 프레임워크!
장점❓
- 스타일 클래스의 이름을 더 이상 생각할 필요가 없다.
- CSS 파일/스타일 블록과 HTML 코드 사이의 컨텍스트 전환이 훨씬 적음.
- 반응형 구현이 더 쉬워짐.
- 일관성 있는 디자인을 구현하기 쉬움.
- 프로그래밍 언어와 같은 추상화 수준을 제공해 스타일을 빠르게 적용할 수 있어 코드의 길이가 줄고, 개발 시간이 절약된다.
단점❓
- 새로운 스타일을 사용하면 CSS 클래스를 생성하게 되어 CSS 파일 크기가 커지고 페이지 로드 시간도 늘어날 수 있음
- 다른 개발자들과 협업할 경우 CSS파일에 충돌이 생겨 해결해야 함
- tailwind를 사용할 수 없는 스타일인 경우에 별도의 css 파일을 생성해야 하기 때문에 일관성 있는 스타일링이 어려울 수 있음
사용해보자 ✅
- 개발환경 : Next.js
- 사용언어 : TypeScript
Tailwind CLI
npm install -D tailwindcss
npx tailwindcss init
위 명령어를 사용하면 tailwind.config.js 파일이 자동 생성된다.
Template 경로 설정하기
tailwind.cofing.js 파일에 템플릿 경로를 설정해준다.
(본인의 디렉토리 경로에 맞게 설정해주시면 됩니다!)
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
// add this lines
"./pages/**/*.{js,ts,jsx,tsx}",
"./src/**/*.{js,ts,jsx,tsx}"
],
theme: {
extend: {},
},
plugins: [],
}
CSS에 Tailwind directive 추가하기
메인 CSS 파일(src/input.css)의 Tailwind의 모든 layer에 @tailwind directive를 추가하기
나의 경우에는, "./styles/global.css"에 아래를 추가해주었다.
(React쓰시는 분은 아미 App.css 파일에 적용하시면 될듯?)
/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;실제로 TailWind를 이용하여 로그인 페이지를 구현해 보았다!
뭔가 어디서 많이 본듯한 느낌이죠?
다들 어디서 이런 디자인들을 맞춰오나 싶었는데,,, Tailwind 였다...!!!
짱편하고 짱신기해 🫢
Tailwind 기반으로 아래의 로그인 페이지를 만들어보았다!
Login.tsx
import {useRouter} from 'next/router'
import Image from 'next/image';
const Login = () =>{
const router = useRouter();
return(
<section className='full'>
<div className='container'>
<div className=' flex justify-center items-center flex-wrap h-full g-6 text-gray-800'>
<div className=''>
<div className='block bg-white shadow-lg rounded-lg'>
<div className='lg:flex lg:flex-wrap g-0'>
<div className='px-4 md:px-0'>
<div className='md:p-12 md:mx-6'>
<div className='text-center mb-4'>
<Image className='mb-4'
src="/img/logo.png"
alt="My Image"
width={300}
height={300}
/>
<h4 className='text-xl font-semibold mt-1 mb-10 pb-1'>
덕성여자대학교 모바일 전공선택박람회
</h4>
</div>
<form>
<div className='mb-4'>
<input
type='email'
className='form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none'
placeholder='Your Email'
name='userEmail'
/>
</div>
<div className='mb-4'>
<input
type='password'
className='form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none'
placeholder='Password'
name='pin'
/>
</div>
<div className='text-center pt-1 mb-4 pb-1'>
<button
className='bg-green inline-block px-6 py-2.5 text-black font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-red-800 hover:text-white hover:shadow-lg focus:shadow-lg focus:outline-none focus:ring-0 active:shadow-lg transition duration-150 ease-in-out w-full mb-3'
type='button'
onClick={()=>router.push('/about')}
>
Log In
</button>
</div>
<div className='flex items-center justify-between pb-6'>
<p className='mb-0 mr-2'>최초접속시 회원가입이 필요합니다.</p>
<button
type='button'
className='inline-block px-6 py-2 border-1 border-red-800 text-red-800 font-medium text-xs leading-tight uppercase rounded hover:bg-red-800 hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out'
onClick={()=>router.push('/Signup')}
>
회원가입
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
)
}
export default Login