Weeeeey Weeeeey

FrontEnd/Tailwind css

• [Tailwind css] gap , space (feat. Flex)

  FrontEnd/Tailwind css 2024. 9. 4. 09:55

  둘 다 동작은 부모에서 선언하여 자식들의 간격을 유지시켜줌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..

  Read More
• [Tailwind Css] hover와 focus를 한 번에

  FrontEnd/Tailwind css 2023. 7. 5. 20:42

  //tailwind.config.js const plugin = require('tailwindcss/plugin') module.exports = { plugins: [ plugin(function({ addVariant }) { addVariant('hocus', ['&:hover', '&:focus']) }) ], }

  Read More
• Tailwind CSS 설치 및 적용법

  FrontEnd/Tailwind css 2022. 11. 30. 22:29

  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..

  Read More
• CLS 함수를 이용해서 속성값 주기

  FrontEnd/Tailwind css 2022. 11. 25. 22:15

  블라

  Read More