inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Hướng dẫn cơ bản về Tailwind CSS tạo kiểu dễ dàng và nhanh chóng

Xử lý các ví dụ cơ bản

현재 바뀐건지 문의드립니다! 숫자를 낮춰 blue의 우선순위를 높이려했는데 blue를 red가 무조건 이기는 것으로 보여서요.

456

minute1coding3410

2 câu hỏi đã được viết

0

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

 

현재 문법이 바뀐건가용?

HTML/CSS

Câu trả lời 3

0

Hojun Lee

CDN 방식과 CLI 방식이 달라 교안에도 업데이트를 해두었습니다. 상세한 내용은 교안을 확인해주세요. :)

강의자료에도 업데이트 해두었습니다.

 

image

0

jejucoding

추가 답변드립니다!
tailwind CSS의 색상값은 구성 파일에서 특정 순서로 정의됩니다. bg-red-500과 bg-blue-500처럼 동일한 유형의 두 클래스 간에 충돌이 발생하면 생성된 CSS 소스 순서로 인해 구성 파일의 뒷부분에 정의된 클래스가 우선합니다.

기본적으로 Tailwind CSS 구성 파일의 색상은 알파벳순으로 정렬되므로 bg-red-500은 bg-blue-500보다 우선합니다. 이는 "red"가 알파벳 순으로 "blue" 뒤에 오기 때문에 "bg-blue-500" 클래스가 생성된 이에후 나타납니다.

HTML에 클래스가 나열되는 순서와는 상관이 없고, 우선 순위는 전적으로 생성된 CSS 파일에서 클래스가 정의되는 순서에 따라 결정됩니다. 이것이 일반적으로 CSS가 작동하는 방식입니다. 두 가지 스타일이 충돌할 때 후자 우선순위의 원칙때문에 스타일시트에서 나중에 정의된 스타일이 이전 스타일보다 우선합니다.

0

Hojun Lee

넵, 현재 버전에서는 아래와 같이 작성하였을 때 둘 다 red가 나오고 있습니다. 순서와 상관없이, 숫자에 상관없이 항상 빨간색이 우선되어 나오고 있네요. 조만간 관련 글을 정리해 올리도록 하겠습니다.

감사합니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <div class="bg-red-500 bg-blue-500">Hello, world!</div>
    <div class="bg-blue-500 bg-red-500">Hello, world!</div>
</body>
</html>

검색엔진 차단 noindex

0

34

2

파트9 강의는 언제 오픈하시나요

0

34

2

ZIP 파일

0

29

2

26강 13F 강의 불일치 및 질문 요청

0

39

3

state 객체로 묶기

0

28

1

XAMPP에서 Apache, DB 재기동 시 접속안되는 문제

0

19

1

Breadth (등락 비율) 분석

0

24

1

26 .강의 프롬프트와 프롬프트파일(part3) 내용이 차이가 있어요.

0

31

2

6-6

0

31

1

Json 플러그인 사용시 variable collection 없음

0

35

2

배리어블 목록 없음

0

45

3

Token 등록 방법 문의

0

28

1

6-6 실습 문의

0

34

2

섹션5 노션링크 는 따로 없나요?

0

37

2

Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.

0

41

2

첨부자료 Part 4 코드 확인 부탁드리겠습니다.

0

37

2

선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서

0

34

1

퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.

0

74

2

tailwind v4

0

144

2

학습 자료를 받을 수 있나요 ?

0

262

1

수업시 사용하는 툴이 궁금합니다.

0

476

2

명령어 touch tailwind.config.js

0

434

0

hover일때

0

326

0

폐쇄망에서 tailwind css 파일로 받아서 사용하려고 하는데 질문드립니다.

0

1379

1