본문 바로가기

css/tailwind CSS4

[tailwind CSS] 4. 반응/상태 선택자 추가 방법(hover, focus, checked, disabled, etc.) tailwind에서 제공하는 반응/상태 선택자는 다음과 같다. Hover Focus Active Group-hover : 부모요소에 group 클래스 추가 후, 자식 요소에 선언 Group-focus : 부모요소에 group 클래스 추가 후, 자식 요소에 선언 Focus-within Focus-visible Motion-safe Motion-reduce Disabled Visited Checked First-child Last-child Odd-child Even-child 원하는 선택자가 없을 경우: [tailwind CSS] 3. 커스텀 선택자(클래스) 추가 방법, Adding variants tailwind.config.js 1. plugin을 불러와 선택자와 클래스명을 지정하고, tailwind .. 2021. 4. 18.
[tailwind CSS] 3. 커스텀 선택자(클래스) 추가 방법, Adding variants tailwind.config.js 1. plugin을 불러와 선택자와 클래스명을 지정하고, tailwind CSS를 재생성한다. 1.1. 삽입 위치 const plugin = require('tailwindcss/plugin') // ★★ module.exports = { purge: [], darkMode: false, theme: { extend: {}, }, variants: { // ★★ }, plugins: [ // ★★ ], } 1.2. 기본형 const plugin = require('tailwindcss/plugin') // ★★ module.exports = { purge: [], darkMode: false, theme: { extend: {}, }, variants: { extend:.. 2021. 4. 18.
[tailwind CSS] 2. vscode 플러그인 추천 1. Tailwind CSS IntelliSense html 작성 시, 입력한 문자로 시작하는 클래스명들을 보여준다. 2. Tailwind CSS Explorer vscode에서 tailwind 클래스명들을 속성별로 검색 확인할 수 있다. 이와 비슷한 플러그인으로는 Tailwind Docs가 있는데, 이는 vscode에서의 바로 확인은 아니고, 검색한 클래스의 설명이 기입된 공식 사이트 페이지를 오픈한다. 3. Headwind 지정한 클래스를, 속성별로 재배열 시켜준다. 예로 다음과 같은 코드가 있다면 Mint-Coding 아래와 같이 재배열 시켜, 클래스 파악에 도움 준다. 팀워크가 아니어도, 추후 관리를 위해 강력 추천하는 플러그인이다. Mint-Coding 2021. 4. 10.
[tailwind CSS] 1. install / 빠른 개발을 위한 유틸리티 클래스(못생긴 코드엔 흐린눈 필요) Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 0. node 설치 및 project 생성하기 tailwind CSS는 최소 node v11 이상을 요구한다. 따라서 먼저 설치된 node 버전을 확인하고, 11 이하일 경우, 11 이상의 버전으로 설치 및 설정 변경한다. node -v // 버전 확인 nvm install 14.16.1 // node 설치 nvm use 14.16.1 // 해당 버전으로 설정 그 후 project를 생성하면 tailwind 설치를 위한 준비가 끝난다. npm init -y 1.. 2021. 4. 10.

티스토리툴바