현재 바뀐건지 문의드립니다! 숫자를 낮춰 blue의 우선순위를 높이려했는데 blue를 red가 무조건 이기는 것으로 보여서요.
454
작성한 질문수 2
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
현재 문법이 바뀐건가용?
답변 3
0
추가 답변드립니다!
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
넵, 현재 버전에서는 아래와 같이 작성하였을 때 둘 다 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>Json 플러그인 사용시 variable collection 없음
0
4
1
배리어블 목록 없음
0
18
2
Token 등록 방법 문의
0
16
1
6-6 실습 문의
0
21
2
섹션5 노션링크 는 따로 없나요?
0
26
2
Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.
0
32
2
첨부자료 Part 4 코드 확인 부탁드리겠습니다.
0
26
2
선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서
0
24
1
퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.
0
52
2
claude plugin 방법 자세히 부탁드려요
0
40
2
강의에 적용한 스크립트를 받아 볼수 있을까요?
0
40
2
최근 코테, 과제 테스트 트렌드
0
67
2
노션 25 인터렉션 구현 파트 안 보입니다!
0
39
2
파트3 13F부분도 짤린거같은데 확인해주세요
0
39
2
Gemini로 진행가능 여부 궁금합니다.
0
58
2
뉴스페이퍼 싱글템플릿 디자인 관련 상담 요청
0
26
2
프롬프트 11 진행 완료
0
44
2
파트3 수급 부분
0
42
2
tailwind v4
0
141
2
학습 자료를 받을 수 있나요 ?
0
262
1
수업시 사용하는 툴이 궁금합니다.
0
473
2
명령어 touch tailwind.config.js
0
434
0
hover일때
0
325
0
폐쇄망에서 tailwind css 파일로 받아서 사용하려고 하는데 질문드립니다.
0
1371
1