유틸리티 기반이라 버튼 컴포넌트가 없어서 만들어 봄
빌드방법
[code]
npx tailwindcss -i src/app.css -o dist/app.css
[/code]
src/app.css
[code]
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
input:read-only:focus {
@apply outline-none;
}
}
@layer components {
.btn {
@apply inline-flex items-center justify-center gap-2 px-4 py-1 text-xs font-medium leading-5 text-center transition rounded border whitespace-nowrap;
&:disabled {
@apply shadow-none transform-none;
pointer-events: none;
opacity: 0.65;
}
}
.btn:hover {
&:disabled {
@apply shadow-none;
}
}
.btn-sm {
@apply px-2 py-0.5 text-xs leading-5;
}
.btn-lg {
@apply text-lg leading-8;
}
.btn-xl {
@apply text-2xl leading-10;
}
.btn-full {
@apply flex w-full justify-center items-center;
}
.btn-primary {
@apply text-white bg-blue-500 border-transparent shadow;
&.active {
@apply bg-blue-800;
}
&:hover {
@apply shadow-lg bg-blue-600;
}
}
.btn-secondary {
@apply text-white bg-gray-500 border-transparent shadow;
&.active {
@apply bg-gray-800;
}
&:hover {
@apply shadow-lg bg-gray-600;
}
}
.btn-success {
@apply text-white bg-green-500 border-transparent shadow;
&.active {
@apply bg-green-800;
}
&:hover {
@apply shadow-lg bg-green-600;
}
}
.btn-danger {
@apply text-white bg-red-500 border-transparent shadow;
&.active {
@apply bg-red-800;
}
&:hover {
@apply shadow-lg bg-red-600;
}
}
.btn-warning {
@apply text-white bg-yellow-500 border-transparent shadow;
&.active {
@apply bg-yellow-700;
}
&:hover {
@apply shadow-lg bg-yellow-600;
}
}
.btn-info {
@apply text-white bg-indigo-300 border-transparent shadow;
&.active {
@apply bg-indigo-500;
}
&:hover {
@apply shadow-lg bg-indigo-400;
}
}
.btn-light {
@apply text-black bg-white border-transparent border-gray-300;
&.active {
@apply bg-gray-200;
}
&:hover {
@apply bg-gray-100;
}
}
.btn-dark {
@apply text-white bg-gray-700 border-transparent shadow;
&.active {
@apply bg-gray-900;
}
&:hover {
@apply shadow-lg bg-gray-800
}
}
.btn-link {
@apply text-blue-700 underline bg-white border-transparent;
&:hover {
@apply text-blue-900;
}
}
.btn-primary-o {
@apply text-blue-500 bg-white border border-blue-600 active: bg-blue-500;
&.active {
@apply bg-blue-500 text-white;
}
&:hover {
@apply bg-blue-100;
}
}
.btn-secondary-o {
@apply text-gray-500 bg-white border border-gray-500 active: bg-gray-500;
&.active {
@apply bg-gray-500 text-white;
}
&:hover {
@apply bg-gray-100;
}
}
.btn-success-o {
@apply text-green-500 bg-white border border-green-500 active: bg-green-500;
&.active {
@apply bg-green-500 text-white;
}
&:hover {
@apply bg-green-100;
}
}
.btn-danger-o {
@apply text-red-500 bg-white border border-red-500 active: bg-red-500;
&.active {
@apply bg-red-500 text-white;
}
&:hover {
@apply bg-red-100;
}
}
.btn-warning-o {
@apply text-yellow-500 bg-white border border-yellow-500 active: bg-yellow-500;
&.active {
@apply bg-yellow-500 text-white;
}
&:hover {
@apply bg-yellow-100;
}
}
.btn-info-o {
@apply text-indigo-500 bg-white border border-indigo-500 active: bg-indigo-500;
&.active {
@apply bg-indigo-500 text-white;
}
&:hover {
@apply bg-indigo-100;
}
}
.btn-dark-o {
@apply text-gray-700 bg-white border border-gray-700 active: bg-gray-700;
&.active {
@apply bg-gray-700 text-white;
}
&:hover {
@apply bg-gray-500 text-white;
}
}
}
/* 이건 4버전일 경우에만 */
@layer utilities {
.basis-0 { flex-basis: 0px; }
.basis-1 { flex-basis: 0.25rem; }
.basis-2 { flex-basis: 0.5rem; }
.basis-3 { flex-basis: 0.75rem; }
.basis-4 { flex-basis: 1rem; }
.basis-5 { flex-basis: 1.25rem; }
.basis-6 { flex-basis: 1.5rem; }
.basis-7 { flex-basis: 1.75rem; }
.basis-8 { flex-basis: 2rem; }
.basis-9 { flex-basis: 2.25rem; }
.basis-10 { flex-basis: 2.5rem; }
.basis-11 { flex-basis: 2.75rem; }
.basis-12 { flex-basis: 3rem; }
.basis-14 { flex-basis: 3.5rem; }
.basis-16 { flex-basis: 4rem; }
.basis-20 { flex-basis: 5rem; }
.basis-24 { flex-basis: 6rem; }
.basis-28 { flex-basis: 7rem; }
.basis-32 { flex-basis: 8rem; }
.basis-36 { flex-basis: 9rem; }
.basis-40 { flex-basis: 10rem; }
.basis-44 { flex-basis: 11rem; }
.basis-48 { flex-basis: 12rem; }
.basis-52 { flex-basis: 13rem; }
.basis-56 { flex-basis: 14rem; }
.basis-60 { flex-basis: 15rem; }
.basis-64 { flex-basis: 16rem; }
.basis-72 { flex-basis: 18rem; }
.basis-80 { flex-basis: 20rem; }
.basis-96 { flex-basis: 24rem; }
.basis-auto { flex-basis: auto; }
.basis-px { flex-basis: 1px; }
.basis-0\.5 { flex-basis: 0.125rem; }
.basis-1\.5 { flex-basis: 0.375rem; }
.basis-2\.5 { flex-basis: 0.625rem; }
.basis-3\.5 { flex-basis: 0.875rem; }
.basis-1\/2 { flex-basis: 50%; }
.basis-1\/3 { flex-basis: 33.333333%; }
.basis-2\/3 { flex-basis: 66.666667%; }
.basis-1\/4 { flex-basis: 25%; }
.basis-2\/4 { flex-basis: 50%; }
.basis-3\/4 { flex-basis: 75%; }
.basis-1\/5 { flex-basis: 20%; }
.basis-2\/5 { flex-basis: 40%; }
.basis-3\/5 { flex-basis: 60%; }
.basis-4\/5 { flex-basis: 80%; }
.basis-1\/6 { flex-basis: 16.666667%; }
.basis-2\/6 { flex-basis: 33.333333%; }
.basis-3\/6 { flex-basis: 50%; }
.basis-4\/6 { flex-basis: 66.666667%; }
.basis-5\/6 { flex-basis: 83.333333%; }
.basis-1\/12 { flex-basis: 8.333333%; }
.basis-2\/12 { flex-basis: 16.666667%; }
.basis-3\/12 { flex-basis: 25%; }
.basis-4\/12 { flex-basis: 33.333333%; }
.basis-5\/12 { flex-basis: 41.666667%; }
.basis-6\/12 { flex-basis: 50%; }
.basis-7\/12 { flex-basis: 58.333333%; }
.basis-8\/12 { flex-basis: 66.666667%; }
.basis-9\/12 { flex-basis: 75%; }
.basis-10\/12 { flex-basis: 83.333333%; }
.basis-11\/12 { flex-basis: 91.666667%; }
.basis-full { flex-basis: 100%; }
}
[/code]
사용예제)
[code]
<div>
<button>Primary</button>
<button>Secondary</button>
<button>Success</button>
<button>Info</button>
<button>Danger</button>
<button>Warning</button>
<button>Dark</button>
<button>Light</button>
<button>Link</button>
</div>
<div>
<button>Primary</button>
<button>Secondary</button>
<button>Success</button>
<button>Info</button>
<button>Danger</button>
<button>Warning</button>
<button>Dark</button>
<button>Light</button>
</div>
<div>
<button>Primary</button>
<button>Secondary</button>
<button>Success</button>
<button>Info</button>
<button>Danger</button>
<button>Warning</button>
<button>Dark</button>
</div>
<div>
<button>Primary</button>
<button>Secondary</button>
<button>Success</button>
<button>Info</button>
<button>Danger</button>
<button>Warning</button>
<button>Dark</button>
</div>
<div>
<button>Primary</button>
<button>Primary</button>
<button>Primary</button>
<button>Primary</button>
</div>
<div>
<button>
<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 20 20″ fill=”currentColor”>
<path fill-rule=”evenodd”
d=”M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z”
clip-rule=”evenodd”></path>
</svg>
Primary
</button>
<button>
<svg xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 24 24″>
<path
d=”M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12″>
</path>
</svg>
Primary
</button>
</div>
[/code]
