Skip to content

Instantly share code, notes, and snippets.

@azunyuuuuuuu
Created November 20, 2024 07:07
Show Gist options
  • Select an option

  • Save azunyuuuuuuu/af1648c6f1ae5c0c24300e7192510f5f to your computer and use it in GitHub Desktop.

Select an option

Save azunyuuuuuuu/af1648c6f1ae5c0c24300e7192510f5f to your computer and use it in GitHub Desktop.
some tailwindcss colors
<div class="p-10 grid gap-4">
<div class="w-20 h-20 bg-primary-500">primary</div>
<div class="w-20 h-20 bg-secondary-500">secondary</div>
<div class="w-20 h-20 bg-success-500">success</div>
<div class="w-20 h-20 bg-danger-500">danger</div>
<div class="w-20 h-20 bg-warning-500">warning</div>
<div class="w-20 h-20 bg-info-500">info</div>
</div>
@tailwind base;
@tailwind components;
@tailwind utilities;
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
primary: { 50: '#F1F5FB', 100: '#E3EBF7', 200: '#C7D7F0', 300: '#ABC2E8', 400: '#8FAEE0', 500: '#6590D5', 600: '#3061AF', 700: '#285192', 800: '#204075', 900: '#183058', },
secondary: { 50: '#F8F9F9', 100: '#F1F2F4', 200: '#E4E6E9', 300: '#D6D9DE', 400: '#C8CCD3', 500: '#B3B9C2', 600: '#848D9C', 700: '#6B7585', 800: '#565D6B', 900: '#404650', },
success: { 50: '#EAFCF2', 100: '#D6FAE4', 200: '#ACF5C9', 300: '#83F0AE', 400: '#59EA93', 500: '#1CE26B', 600: '#118C42', 700: '#0E7537', 800: '#0C5D2C', 900: '#094621', },
danger: { 50: '#FCF2F4', 100: '#FAE5E9', 200: '#F5CCD3', 300: '#F0B2BD', 400: '#EB99A6', 500: '#E37285', 600: '#D42A46', 700: '#B0233A', 800: '#8D1C2F', 900: '#6A1523', },
warning: { 50: '#FDF8EF', 100: '#FBF2DE', 200: '#F7E4BE', 300: '#F4D79D', 400: '#F0C97D', 500: '#EAB54C', 600: '#C48A17', 700: '#A37313', 800: '#825C0F', 900: '#62450B', },
info: { 50: '#F3FAFC', 100: '#E7F4F9', 200: '#CEE9F2', 300: '#B6DFEC', 400: '#9ED4E6', 500: '#79C4DC', 600: '#34A4CA', 700: '#2B89A8', 800: '#236D86', 900: '#1A5265', },
}
},
},
plugins: [],
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment