THE STAR SHINING IN THE MIDDLE

CSS/Tailwind CSS 검색 결과

해당 글 10건

Tailwind CSS Customization

Configuration https://tailwindcss.com/docs/configuration Tailwind 설치를 구성하고 사용자 지정하는 방법에 대한 안내서입니다. Tailwind는 맞춤형 사용자 인터페이스를 구축하기 위한 프레임워크이기 때문에 처음부터 사용자 지정을 염두에 두고 설계되었다. 기본적으로 Tailwind는 프로젝트의 루트에서 사용자 지정을 정의할 수 있는 선택적 `tailwind.config.js` 파일을 찾습니다. /* tailwind.config.js */ module.exports = { content: ['./src/**/*.{html,js}'], theme: { colors: { 'blue': '#1fb6ff', 'purple': '#7e5bef', 'pink': '#..

CSS/Tailwind CSS 2022. 5. 10. 13:57

Tailwind CSS Functions & Directives

Directives https://tailwindcss.com/docs/functions-and-directives Directives는 Tailwind CSS 프로젝트에 특별한 기능을 제공하는 CSS에서 사용할 수 있는 사용자 지정 Tailwind 관련 at-rules입니다. @tailwind https://tailwindcss.com/docs/functions-and-directives#tailwind `@tailwind` 디렉티브를 사용하여 Tailwind의 `base`, `components`, `utilities` 및 `variants` 스타일을 CSS에 삽입합니다. /** * Tailwind의 기본 스타일과 플러그인에 의해 등록된 모든 기본 스타일을 주입한다. */ @tailwind base;..

CSS/Tailwind CSS 2022. 5. 9. 17:47

Tailwind CSS 반응형

Responsive Design (@media) https://tailwindcss.com/docs/responsive-design 클래스명에 아래의 표에 있는 Breakpoint prefix를 붙이고 콜론(:) 후 적용할 클래스명을 작성하면 됩니다. Breakpoint prefix Minimum width CSS sm 640px @media (min-width: 640px) { ... } md 768px @media (min-width: 768px) { ... } lg 1024px @media (min-width: 1024px) { ... } xl 1280px @media (min-width: 1280px) { ... } 2xl 1536px @media (min-width: 1536px) { ... }..

CSS/Tailwind CSS 2022. 5. 9. 16:42

Tailwind CSS Transforms

Scale https://tailwindcss.com/docs/scale Class transform scale-0 scale(0) scale-x-0 scaleX(0) scale-y-0 scaleY(0) scale-50 scale(.5) scale-x-100 scaleX(1) scale-y-150 scaleY(1.5) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 Rotate https://tailwindcss.com/docs/rotate Class transform rotate-0 rotate(0deg) rotate-1 rotate(1deg) rotate-45 rotate(45deg) rotate-90 rotate(90deg) rotate-180 rotate(180deg..

CSS/Tailwind CSS 2022. 5. 9. 11:16

Tailwind CSS Animation

Animation https://tailwindcss.com/docs/animation Class Properties animate-none animation: none; animate-spin animation: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } animate-ping animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } animate-pulse animation: puls..

CSS/Tailwind CSS 2022. 5. 6. 12:44

Tailwind CSS Transitions

Translition Property https://tailwindcss.com/docs/transition-property Class Properties transition-none transition-property: none; transition-all transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; transition transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, f..

CSS/Tailwind CSS 2022. 5. 6. 11:35

Tailwind CSS Flexbox & Grid

Flex Basis https://tailwindcss.com/docs/flex-basis Class flex-basis basis-0 0px basis-1 0.25rem basis-auto auto basis-px 1px basis-0.5 0.125rem basis-1/2 50% basis-full 100% HTML 삽입 미리보기할 수 없는 소스 01 02 03 Flex Direction https://tailwindcss.com/docs/flex-direction Class flex-direction flex-row row flex-row-reverse row-reverse flex-col column flex-col-reverse column-reverse HTML 삽입 미리보기할 수 없는 소스 0..

CSS/Tailwind CSS 2022. 5. 6. 11:02

Tailwind CSS 기본 속성

이번 정리는 대부분 코드로 하겠습니다. 기본 속성 https://tailwindcss.com/docs/margin https://tailwindcss.com/docs/padding https://tailwindcss.com/docs/font-weight https://tailwindcss.com/docs/text-color div속 텍스트는 제가 보려고 해당 클래스의 들어있는 스타일로 넣었습니다. font-weight, text-color .text-base { font-size: 1rem; line-height: 1.5rem; } .text-red-500 { --tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity)); } .text-lg ..

CSS/Tailwind CSS 2022. 5. 6. 10:27