플레이스토어 병아리게임 출시!!!~~ [많은 이용 부탁드립니다!]

📝다크모드 적용시키기 (tailwind.config.ts)

const config: Config = {
  ...
  darkMode: "media",
  plugins: [],
  ...
}
export default config


...
<div className="bg-red-500 dark:bg-blue-800">
    Testing Dark Mode
</div>

// darkMode: "class"
// darkMode: "media"

tailwind.config.ts에서 darkMode를 media로 설정시 dark: 라고 적은 CSS가 우선이 된다 (default : class)

📝사용자 임의 값을 넣기

<span className="text-[1200px]"> Hello </span>

- [${원하는 값}]을 이용해 넣을 수 있다

📝Flex Box

<!-- 같은 크기로 나눈다 -->
<div>
	<div className="flex">
		<div className="flex-grow"/>
		<div className="flex-grow"/>
	</div>
</div>

<!-- 같은 크기로 나누지 않고 같은 row에만 둔다 -->
<div>
	<div className="flex">
		<div className="flex-1"/>
		<div className="flex-1"/>
	</div>
</div>

<!-- 비율로 나눈다 -->
<div>
	<div className="flex">
		<div className="basis-1/4"/>
		<div className="basis-3/4"/>
	</div>
</div>

bootstrap의 row는 flex와 동일하게 적용되며 col의 경우는 flex-grow이다

📝배열 원하는 곳에 CSS 적용

<ul>
    {[1, 2, 3, 4].map((i) => (
        <div
            key={i}
            className="flex justify-between my-2 odd:bg-blue-50 even:bg-yellow-50 first:bg-teal-500 last:bg-amber-50"
        >
            <span className="text-gray-500">Grey Chair</span>
            <span className="font-semibold">$19</span>
        </div>
    ))}
</ul>

결과화면

📝문자열 일부분 CSS 적용

<ul>
    {["a", "b", "c", ""].map((c, i) => (
        <li className="bg-red-500 py-2 empty:bg-blue-800" key={i}>
            {c}
        </li>
    ))}
</ul>

결과화면

📝문자열 일부분 CSS 적용

return (
    <div className="flex flex-col space-y-2  p-5 ">
        <p className="first-letter:text-7xl first-letter:hover:text-purple-400">
            Hello everyone!
        </p>
    </div>
)

결과화면 ( 호버 X / 호버 O )

📝반응형 크기별 CSS 적용

<div className="
    bg-white 
    sm:hover:bg-pink-800
    sm:bg-red-400
    md:bg-teal-400
    lg:bg-indigo-400
    xl:bg-yellow-400
    2xl:bg-pink-500
    p-6
    rounded-3xl
    shadow-xl"
>

sm, md, lg, xl, 2xl별로 CSS를 달리 적용할 수 있다

📝반응형 모바일(가로, 세로)

<div className="portrait:bg-indigo-600 landscape:bg-teal-500 p-6 pb-14 xl:pb-40">
  <span className="text-white text-2xl">Profile</span>
</div>

반응형과 비슷한 느낌인데 핸드폰의 가로랑 세로에 따라 CSS를 달리 적용할 수 있습니다

• portrait
  • 세로
• landscape
  • 가로

📝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-적용해보기

https://tailwindcss.com/docs/installation