FrontEnd/Tailwind css4 [Tailwind css] gap , space (feat. Flex) 둘 다 동작은 부모에서 선언하여 자식들의 간격을 유지시켜줌gap: Flexbox나 Grid 레이아웃에서 사용space: 일반적인 형제 요소들 사이의 간격을 조절할 때 사용적용 방식:gap: 부모 컨테이너에 직접 적용space: 부모 컨테이너에 적용하며, 자식 요소들에 마진을 추가.gap-x-2 { column-gap: 0.5rem /* 8px */;}.space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem /* 8px */ * var(--tw-space-x-reverse)); margin-left: calc(0.5rem /* 8px */ * calc(1 - var(--tw-spac.. 2024. 9. 4. [Tailwind Css] hover와 focus를 한 번에 //tailwind.config.js const plugin = require('tailwindcss/plugin') module.exports = { plugins: [ plugin(function({ addVariant }) { addVariant('hocus', ['&:hover', '&:focus']) }) ], } 2023. 7. 5. Tailwind CSS 설치 및 적용법 1. Shell yarn add tailwindcss postcss autoprefixer -D npx tailwindcss init -p 2. tailwind.config.js 설정 파일의 content 에 tailwind를 사용할 모든 경로를 입력합니다. module.exports = { content: [ // tailwind를 사용할 경로들을 입력 "./pages/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], } 4. _app.tsx 에 import 되어있는 styles/globals.css 내부 내용들을 모두 삭제하고 @tailwind base @tailwind c.. 2022. 11. 30. CLS 함수를 이용해서 속성값 주기 블라 2022. 11. 25. 이전 1 다음
