tailwindcss 버튼 컴포넌트 > IT 기술백서

유틸리티 기반이라 버튼 컴포넌트가 없어서 만들어 봄

 

빌드방법

[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 class="mb-2">

      <button class="btn btn-primary">Primary</button>

      <button class="btn btn-secondary">Secondary</button>

      <button class="btn btn-success">Success</button>

      <button class="btn btn-info">Info</button>

      <button class="btn btn-danger">Danger</button>

      <button class="btn btn-warning">Warning</button>

      <button class="btn btn-dark">Dark</button>

      <button class="btn btn-light">Light</button>

      <button class="btn btn-link">Link</button>

  </div>

  <div class="mb-2">

      <button class="rounded-full btn btn-primary">Primary</button>

      <button class="rounded-full btn btn-secondary">Secondary</button>

      <button class="rounded-full btn btn-success">Success</button>

      <button class="rounded-full btn btn-info">Info</button>

      <button class="rounded-full btn btn-danger">Danger</button>

      <button class="rounded-full btn btn-warning">Warning</button>

      <button class="rounded-full btn btn-dark">Dark</button>

      <button class="rounded-full btn btn-light">Light</button>

  </div>

  <div class="mb-2">

      <button class="btn btn-primary-o">Primary</button>

      <button class="btn btn-secondary-o">Secondary</button>

      <button class="btn btn-success-o">Success</button>

      <button class="btn btn-info-o">Info</button>

      <button class="btn btn-danger-o">Danger</button>

      <button class="btn btn-warning-o">Warning</button>

      <button class="btn btn-dark-o">Dark</button>

  </div>

  <div class="mb-2">

      <button class="rounded-full btn btn-primary-o">Primary</button>

      <button class="rounded-full btn btn-secondary-o">Secondary</button>

      <button class="rounded-full btn btn-success-o">Success</button>

      <button class="rounded-full btn btn-info-o">Info</button>

      <button class="rounded-full btn btn-danger-o">Danger</button>

      <button class="rounded-full btn btn-warning-o">Warning</button>

      <button class="rounded-full btn btn-dark-o">Dark</button>

  </div>

  <div class="mb-2">

      <button class="btn btn-sm btn-primary">Primary</button>

      <button class="btn btn-primary">Primary</button>

      <button class="btn btn-lg btn-primary">Primary</button>

      <button class="btn btn-xl btn-primary">Primary</button>

  </div>

  <div class="mb-2">

      <button class="btn btn-primary">

          <svg class="w-5 h-5 text-white" 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 class="btn btn-primary">

          <svg class="w-5 h-5 text-white fill-current" 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]