Stylepack

Przyciski

Przyciski na tailwindcss.com

Główny przycisk na tailwindcss.com ma tło #000000, tekst #ffffff, zaokrąglenie 32px i wysokość 40px. Poniżej: każdy wariant przycisku, jakiego używa strona, jego stany hover i focus oraz CSS, dzięki któremu Twoje będą wyglądać tak samo.

Zmierzono na tailwindcss.com 4 dni temu.

Otwórz pełny pakiet designuPobierz pakiet

Przycisk primary

Get started
Hover
brak widocznej zmiany
Focus
outline 1px auto rgb(16, 16, 16), offset 1px
Przejście
all, 0s

Przycisk ghost

v4.3
Hover
brak widocznej zmiany

CSS

Jedna klasa na wariant, ze zmierzonymi wartościami. Czcionka to ta, którą tailwindcss.com ustawia na swoich przyciskach.

buttons.css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px 16px;
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: 32px;
  font-size: 14px;
  font-weight: 600;
  font-family: "inter", sans-serif;
  cursor: pointer;
}
​
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 2px 6px;
  background: transparent;
  color: #000000;
  border: none;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  font-family: "inter", sans-serif;
  cursor: pointer;
}

Dla agentów AI

Pakiet to zwykły tekst, bez klucza: pobierz DESIGN.md albo przekaż cały pakiet do Claude Code, Cursor lub Copilot przez serwer MCP.

curl -s https://stylepack.ai/packs/tailwindcss.com/DESIGN.md

Pytania

Jak zrobić przyciski jak na tailwindcss.com?

Użyj CSS z tej strony: główny przycisk ma tło #000000, tekst #ffffff, zaokrąglenie 32px i wysokość 40px. Dodaj reguły hover i focus wypisane pod każdym wariantem i ustaw na przycisku czcionkę, której używa tailwindcss.com.

Jakiego koloru są przyciski tailwindcss.com?

Główny przycisk na tailwindcss.com ma tło #000000 i tekst #ffffff. Strona używa łącznie 2 wariantów przycisków; każdy jest wypisany na tej stronie ze swoim tłem, obramowaniem, zaokrągleniem i rozmiarem.

Czy agent AI do kodowania może skopiować przyciski tailwindcss.com?

Tak. Pakiet designu tailwindcss.com ze Stylepack zawiera każdy wariant przycisku z jego stanami, czcionki, kolory i zrzuty ekranu, więc Claude Code, Cursor lub Copilot może zbudować pasujące przyciski.