[TIL] Tailwind CSS

진짜 열받게도... 티스토리 임시저장 오류 때문에 %_% 한 번 다 날리고 다시 쓴다...

진짜 너무너무너무 열받지만..!!!! 그래도 어떻게 해 다시 써야지 ㅠ.,ㅠ 나는 두번째쓰는거지만 읽는 사람은 처음이니까 처음처럼 써야해.... 진정해..... 부글부글

 

 

일단 머쓱하게도 바로 전 게시글에 chakra ui 가 좋다며 글을 썼으나, (그래도 앞으로 이전에 했던 것들을 쓰긴 할 것임.. 차크라 좋아여)

새로운 프로젝트에선 SSR 문제로 chakra를 쓰지 못하고 이런저런 이유로 tailwind를 쓰기로 하였다.

SSR(Server Side Rendering): 사용자가 웹 페이지에 접속했을 때 서버가 사용자에게 랜더링될 HTML을 응답하여 브라우저가 바로 랜더링할 수 있게한다. 그 후 CSR과 동일하게 자바스크립트 파일을 다운로드 받고 실행한다.
CSR(Client Side Rendering): 사용자가 웹 페이지에 들어왔을 때 브라우저가 자바스크립트 파일을 다운로드 받아 해석한 후 랜더링한다.

 

그런데 지금까지 써왔던 styled-component나, emotion 과는 다르게 

조금 적응이 필요할 듯 싶어 얼른 정리글을 가지고 왔다.

일단 현재 개발환경에 맞게 next.js 와 typescript를 적용한 연습용 프로젝트를 하나 생성해보려고 한다.

 

 

 

 

---

 

🔨 설치

 

typescript
yarn create next-app --typescript
npx create-next-app@latest --typescript

 

 

이렇게 진행해주면, 전에 해봤듯 이런 저런 질문이 나오는데, 이때 너 tailwind 쓸거냐? 하고 물어봤다.

오잉 원래도 물어봤었나? ㅋㅋㅋㅋ 기억이 안나는데 아는 만큼 보이는 건가보다 하고 yes!해주었음

 

 

의아한 일..

 

 

원래는 npm install -D tailwindcss postcss autoprefixer 을 이용해서 tailwind를 깔아주어야 하는데,

요래조래 쑝쑝하더니 잘 깔렸다. 혹시 몰라 위의 인스톨을 해보았더니 똑같은 개수의 파일을 update 체크 하는거 보니 

아마 저것만으로도 잘 깔린 것 같다.

 

 

TailwindCss 로 초기화
npx tailwindcss init -p

이렇게 해주면, tailwind.config.js 와 postcss.config.js 파일이 생성된다.

 

 

tailwind.config.js 파일 content 안에 경로 추가

// 처음 생성할 때 src로 안했으면

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


//처음 생성할 때 src로 했으면

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

 

globals.css 상단에 추가

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

 

 

⚠️ 오류

 

 tailwindcss를 설치하고 나서 기본적인 설정들을 하고 났는데 아래 경고가 떴다.

Unknown at rule @tailwind css

 

찾아보니 vscode에서는 플러그인 - PostCSS Language Support 를 설치하면 더 이상 경고 문구가 보이지 않는다고.

이제 빨간 줄이 보이지 않는다 (편ㅡ안)

 

 

 

---

 

시작하기전에, 이것 저것 만져보면서 코드를 치던 중에, 

자동완성이 안돼서 불편하다는 것을 깨달았다.. 빨리도 깨달았지 .. ㅎ

다른 css는 오타가 나도 비교적 한눈에 티가 나는데 고작 알파벳 몇 글자로 속성을 판단하는 이 친구는

밑에 자동완성이 떠주지 않으면 고통스럽다는 것을 느꼈음... (bg를 bd로 쓰고도 한 눈에 들어오지가 않았다..)

 

 

Tailwind CSS IntelliSense 라는 플러그인을 설치해주면,

 

진짜로 편안해진다......

 

 

 

---

🫥 사용하기

return (
    <>
        <nav className="bg-gray-800 p-3 flex justify-start">
            <img className="w-10 px-1" src="logo.svg.png" />
            <a className=" text-gray-300 p-3">Team</a>
            <a className=" text-gray-300 p-3">Projects</a>
            <a className=" text-gray-300 p-3">Calendar</a>
        </nav>

        <div className="p-3">
            <input className="p-2 border border-gray-300 rounded-md" placeholder="Email" />
            <button className="py-2 px-4 ml-3  rounded-md text-white bg-indigo-600">Sign In</button>
        </div>
    </>
);

요런 느낌으로 적어주면 됨.

원래는 클래스네임 정하고, 또 CSS파일에다가 만들거나 스타일컴포넌트로 따로 빼서 해주었겠지만, 

이건 className부분에다가 내가 원하는 CSS를 간단한 모양으로 구구절절 (모순ㅋㅋ) 적어주면 되는 것이다.

딱 보면 너무 직관적이고 어디에 어떤 CSS를 추가했는지 단번에 확인이 가능하다. 

근데 내용이 많아지면 많아질수록 딱 보았을 때 좀 지저분해 보일 수 있다는 단점이 있음...

 

그럴 때 global.css 에 아래처럼 적어주고,

@layer components {
	.header_text {
		@apply text-yellow-300 p-3 underline;
	}
}

 

  ...
  	<a className="header_text">Team</a>
    <a className="header_text">Projects</a>
    <a className="header_text">Calendar</a>
  ...

해당 className에 넣어주면!

 

 

 

쉽게 가능하다.

그러니 코드가 너무 길어 지저분해지거나, 아니면 같은 css를 여러번 사용할 때

저렇게 묶어놓고 필요할 때마다 꺼내쓰면 될 것 같다.!

 

 

 

https://tailwindcss.com/docs/flex-basis

Flex Basis - Tailwind CSS

참고! 

---

 

📜 프로젝트

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        'sub-bg-color': '#262634',
        'point-color': "#FBAB10",
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}

 

여기에 전역으로 설정해 놓은 css를 어떻게 사용했나 살펴보면

 

 

<aside
	id={"IssueSideMenu"}
	className={" flex flex-col items-center  bg-sub-bg-color w-72"}
>

이런식으로 bg에 extend.color 속 네임을 적어주어서 사용하면 된다.

 

 

 

 

커서를 올려보면 어떤 것을 의미하는지 자세히 설명해준다. 

그리고 쓸 때도 옆에 작게 써있음 

 

생소하지만 익숙해져 편리하게 사용되기를 바라며 ...