- name
- tailwind-expert
- description
- Estilização de interfaces com Tailwind CSS incluindo componentes responsivos, dark mode, customização de tema, e padrões de design system. Usar para criar layouts responsivos, estilizar componentes Laravel/Blade, implementar design systems, e converter designs em código Tailwind.
Tailwind Expert
Skill para estilização com Tailwind CSS em projetos Laravel.
Setup Laravel + Tailwind
# Instalar
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
# tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
darkMode: 'class', // ou 'media'
theme: {
extend: {},
},
plugins: [],
}/* resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;Componentes Comuns
Card
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Título do Card
</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">
Descrição do card com conteúdo relevante.
</p>
</div>
<div class="px-6 py-4 bg-gray-50 dark:bg-gray-700 border-t border-gray-100 dark:border-gray-600">
<button class="text-blue-600 dark:text-blue-400 hover:underline">
Ver mais
</button>
</div>
</div>Botões
<!-- Primary -->
<button class="px-4 py-2 bg-blue-600 text-white font-medium rounded-lg
hover:bg-blue-700 focus:outline-none focus:ring-2
focus:ring-blue-500 focus:ring-offset-2
transition-colors duration-200
disabled:opacity-50 disabled:cursor-not-allowed">
Salvar
</button>
<!-- Secondary -->
<button class="px-4 py-2 bg-gray-200 text-gray-800 font-medium rounded-lg
hover:bg-gray-300 focus:outline-none focus:ring-2
focus:ring-gray-500 focus:ring-offset-2 transition-colors">
Cancelar
</button>
<!-- Danger -->
<button class="px-4 py-2 bg-red-600 text-white font-medium rounded-lg
hover:bg-red-700 focus:outline-none focus:ring-2
focus:ring-red-500 focus:ring-offset-2 transition-colors">
Excluir
</button>
<!-- Outline -->
<button class="px-4 py-2 border-2 border-blue-600 text-blue-600 font-medium
rounded-lg hover:bg-blue-50 focus:outline-none focus:ring-2
focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Outline
</button>
<!-- Icon Button -->
<button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100
rounded-full transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/>
</svg>
</button>Form Inputs
<!-- Text Input -->
<div class="space-y-1">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
Email
</label>
<input type="email" id="email" name="email"
class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
dark:bg-gray-700 dark:border-gray-600 dark:text-white
placeholder:text-gray-400"
placeholder=" [email protected] ">
<p class="text-sm text-red-600">Mensagem de erro</p>
</div>
<!-- Select -->
<div class="space-y-1">
<label for="status" class="block text-sm font-medium text-gray-700">
Status
</label>
<select id="status" name="status"
class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
bg-white">
<option value="">Selecione...</option>
<option value="active">Ativo</option>
<option value="inactive">Inativo</option>
</select>
</div>
<!-- Textarea -->
<textarea rows="4"
class="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
resize-none"
placeholder="Observações..."></textarea>
<!-- Checkbox -->
<label class="flex items-center space-x-2 cursor-pointer">
<input type="checkbox"
class="w-4 h-4 text-blue-600 border-gray-300 rounded
focus:ring-blue-500 focus:ring-2">
<span class="text-sm text-gray-700">Aceito os termos</span>
</label>Table
<div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-800">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500
dark:text-gray-400 uppercase tracking-wider">
Cliente
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500
uppercase tracking-wider">
Valor
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500
uppercase tracking-wider">
Status
</th>
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500
uppercase tracking-wider">
Ações
</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900 dark:text-white">
João Silva
</div>
<div class="text-sm text-gray-500"> [email protected] </div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
R$ 5.000,00
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 py-1 text-xs font-medium rounded-full
bg-green-100 text-green-800">
Ativo
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm space-x-2">
<button class="text-blue-600 hover:text-blue-900">Editar</button>
<button class="text-red-600 hover:text-red-900">Excluir</button>
</td>
</tr>
</tbody>
</table>
</div>Alert/Badge
<!-- Success Alert -->
<div class="p-4 rounded-lg bg-green-50 border border-green-200">
<div class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
<span class="text-green-800 font-medium">Operação realizada com sucesso!</span>
</div>
</div>
<!-- Error Alert -->
<div class="p-4 rounded-lg bg-red-50 border border-red-200">
<span class="text-red-800">Erro ao processar requisição.</span>
</div>
<!-- Badges -->
<span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">Novo</span>
<span class="px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">Pendente</span>
<span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">Ativo</span>
<span class="px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800">Cancelado</span>Modal
<!-- Overlay -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<!-- Modal -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full mx-4
transform transition-all">
<!-- Header -->
<div class="flex items-center justify-between p-4 border-b dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Título do Modal
</h3>
<button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<!-- Body -->
<div class="p-4">
<p class="text-gray-600 dark:text-gray-300">
Conteúdo do modal aqui.
</p>
</div>
<!-- Footer -->
<div class="flex justify-end gap-2 p-4 border-t dark:border-gray-700">
<button class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">
Cancelar
</button>
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
Confirmar
</button>
</div>
</div>
</div>Layout Responsivo
<!-- Grid Responsivo -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Cards -->
</div>
<!-- Sidebar Layout -->
<div class="flex min-h-screen">
<!-- Sidebar (hidden on mobile) -->
<aside class="hidden md:flex md:flex-col md:w-64 bg-gray-800">
<!-- Nav items -->
</aside>
<!-- Main Content -->
<main class="flex-1 p-6">
<!-- Content -->
</main>
</div>
<!-- Breakpoints Reference -->
<!-- sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px -->Customização de Tema
// tailwind.config.js
export default {
theme: {
extend: {
colors: {
primary: {
50: '#f0f9ff',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
},
brand: '#FF5722',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
spacing: {
'128': '32rem',
},
},
},
}Blade Components
{{-- resources/views/components/button.blade.php --}}
@props([
'variant' => 'primary',
'size' => 'md',
])
@php
$variants = [
'primary' => 'bg-blue-600 text-white hover:bg-blue-700',
'secondary' => 'bg-gray-200 text-gray-800 hover:bg-gray-300',
'danger' => 'bg-red-600 text-white hover:bg-red-700',
];
$sizes = [
'sm' => 'px-3 py-1.5 text-sm',
'md' => 'px-4 py-2',
'lg' => 'px-6 py-3 text-lg',
];
@endphp
<button {{ $attributes->merge([
'class' => "rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 {$variants[$variant]} {$sizes[$size]}"
]) }}>
{{ $slot }}
</button>
{{-- Uso --}}
<x-button variant="primary" size="lg">Salvar</x-button>
<x-button variant="danger">Excluir</x-button>