Tailwindcss

Rapidly build modern websites

Without ever leaving your HTML

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Benefits of Tailwindcss

1. html에서 바로 빠르게 스타일링을 할 수 있다.

2. 클래스 이름을 고민할 필요가 없다.

3. 색상, 간격 등의 유틸리티들로 일관된 디자인을 유지할 수 있다.

4. 커스텀 스타일을 지정할 수 있다. 디자인 시스템을 적용할 때 편리

5. 반응형, 다크모드, 호버, 포커스 등을 쉽게 구현할 수 있다.

6. base, components, utilities로 레이어가 구분되어 적용 우선순위를 명확히 할 수 있어 편리

7. 플러그인을 통해 원하는 유틸리티를 추가할 수 있다. tailwindcss intellisense에도 추가되어 코드 작성시 추천이 되어서 편리 btn, btn-primary, btn-sm 이런 스타일도 변리합니다.

8. 플러그인을 통해 container query와 같은 최신 CSS 기능을 편리하게 사용할 수 있다. 유틸리티로 사용하여 문법이 간단해져 쉽게 사용할 수 있음

9. 커뮤니티와 자료: 활발한 커뮤니티와 다양한 자료가 있어서 학습과 문제 해결이 용이합니다. tailwindcss 유튜브도 아주 잘되어있음

10. 성능 최적화: tailwindcss는 사용된 클래스만을 포함하는 작은 CSS 파일을 생성하여 성능을 최적화합니다.

Drawbacks of Tailwindcss

1. html 코드가 class로 지저분해보일 수 있다는 점
1. 개인적으로 이 부분은 컴포넌트 구조를 짤 때 최대한 컴포넌트의 역할을 나누면 어느정도 해소되는 부분이었습니다. props로 받은 데이터를 단순히 보여주기만 하는 컴포넌트에서 스타일코드는 보여주는 역할에 적합하다고 생각해 이곳에 최대한 스타일코드를 숨겨(?)두고, 로직이 들어있는 컴포넌트에서는 최대한 스타일 코드를 분리하는 식으로 작성하고 있습니다.

Good to use together

• tailwindcss-intellisense

• headlessui

Helpful Resources

Tailwind Connect 2023 — Keynote

The keynote from Tailwind Connect 2023, our first-ever live event that took place on June 20th, 2023, featuring presentations from Adam Wathan, Sam Selikoff, and Steve Schoger. Read the recap on our blog: https://tailwindcss.com/blog/2023-07-18-tailwind-connect-2023-recap 00:00 Introduction 10:00 Tailwind CSS for the modern web 35:46 Oxide, the next evolution of Tailwind CSS 58:30 Catalyst, a React UI kit for Tailwind CSS 1:10:09 Designing Catalyst 1:28:28 Tricks from Catalyst

https://www.youtube.com/watch?v=CLkxRnRQtDE

Creating High-Quality React Components: Best Practices for Reusability

Let's look at best practices for creating reusable & easily maintainable react components together by creating an example button component. You'll learn how to effectively decouple your component style from the component, so you can reuse the same style for any component you like. Also, you'll learn how to use useRef to have access to the base component anywhere you render it in your React project. We'll be using Typescript and TailwindCSS, regular JS and CSS works perfectly fine too. ⭐ Full component as example: https://github.com/joschan21/image-alt-generator/blob/main/src/components/ui/button.tsx ----------- ⭐ Our startup: https://wordful.ai ⭐ My GitHub: https://github.com/joschan21 The stuff I use to make my videos Camera: https://amzn.to/3XcqRKO Light: https://amzn.to/3Xc1yIE Keyboard: https://amzn.to/3CKxnAi Mouse: https://amzn.to/3CNcfcm Microphone: https://amzn.to/3iybVHC Headphones: https://amzn.to/3IHTTgH thats pretty much it. Those are affiliate links so I might earn a commission if you purchase after clicking them. :^)

https://www.youtube.com/watch?v=eXRlVpw1SIQ

10 Tailwind Tricks You NEED To Know!

I've been loving to use Tailwind to style my web projects. This video is a list of the 10 main tips I really wish I knew earlier. --------------------------------------------------------------- Inquiry and Collaborations: contact@perfectbase.dev --------------------------------------------------------------- Join my Discord: https://discord.gg/HvrnhRTfgQ --------------------------------------------------------------- Follow me on twitter: https://twitter.com/RaviCoding --------------------------------------------------------------- Chapters: 0:00 Introduction 0:12 1 - Peer and Group 1:07 2 - Animations 1:46 3 - Responsive Designs 3:00 4 - Intellisense in Variables 4:04 5 - Dynamic Utilities 5:22 6 - apply and theme 6:19 7 - Extend Tailwind 7:00 8 - Plugins 8:48 9 - Colors object 9:29 10 - tailwind-merge

https://www.youtube.com/watch?v=aSlK3GhRuXA

Personal Usages

Utility 활용하기

1. 자주 사용하는 것들은 더 간편하게
흔하게 사용하는 정렬을 더 간편하고 직관적이게 만든 유틸들 입니다. justify, align보다 직관적이고 자주 사용하게 되어서 추천합니다.
 
아래 코드를 압축한 것입니다.
 
👇 tailwindcss의 플러그인으로 추가하면 intellisense에서도 보입니다.
tailwind.confing.ts