O WordPress ainda domina boa parte da web, mas isso não significa que o seu front-end precise ficar preso a temas genéricos ou ao "jeitão" do Bootstrap. Integrar o Tailwind CSS ao WordPress permite modernizar completamente a stack, oferecendo controle visual total via classes utilitárias e uma performance excelente.
Esta integração é a "bala de prata" para quem desenvolve temas proprietários, temas filhos (child themes) ou blocos customizados no Gutenberg.
Quando usar essa stack?
-
Temas Customizados: Criação de temas do zero com design exclusivo.
-
Temas Filhos: Quando você precisa sobrescrever a estrutura de um tema pai sem lutar contra o CSS existente.
-
Gutenberg + ACF: Para estilizar blocos personalizados de forma rápida.
-
Headless: Integração visual caso decida desacoplar o front-end no futuro.
Guia de Configuração Passo a Passo
1. Estrutura Inicial de Diretórios
Dentro de wp-content/themes, crie a pasta do seu tema (ex: meu-tema-tailwind). A organização sugerida é:
meu-tema-tailwind/
├── style.css (Arquivo gerado pelo build)
├── functions.php
├── index.php
├── tailwind.config.js
├── postcss.config.js
├── package.json
└── assets/
└── styles/
└── main.css (Seu arquivo fonte CSS)
2. Inicializando o Projeto
Abra o terminal na pasta do tema e rode os comandos para instalar as dependências de desenvolvimento:
npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Crie o arquivo postcss.config.js na raiz:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
3. Configurando o Tailwind
Edite o arquivo tailwind.config.js. É crucial apontar corretamente onde seus arquivos PHP estão para que o Tailwind saiba quais classes gerar (JIT Engine).
module.exports = {
content: [
"./**/*.php", // Escaneia todos os arquivos PHP do tema
"./src/**/*.js", // (Opcional) Se tiver scripts JS
"./**/*.html"
],
theme: {
extend: {},
},
plugins: [],
}
4. O Arquivo CSS Fonte (Atenção aqui!)
Crie o arquivo assets/styles/main.css. Dica Pro: O WordPress exige metadados no topo do style.css. Vamos colocá-los aqui com o comentário especial /*! para que o minificador não os remova durante o build.
/*!
Theme Name: Meu Tema Tailwind
Theme URI: https://seusite.com
Author: Seu Nome
Description: Tema customizado utilizando Tailwind CSS
Version: 1.0
*/
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Seus estilos customizados extras aqui */
5. Scripts de Build e Desenvolvimento
No seu package.json, configure os scripts. O watch é vital para desenvolvimento em tempo real, e o build prepara o arquivo minificado para produção.
"scripts": {
"watch": "npx tailwindcss -i ./assets/styles/main.css -o ./style.css --watch",
"build": "npx tailwindcss -i ./assets/styles/main.css -o ./style.css --minify"
}
Para começar a desenvolver, rode:
npm run watch
Habilitando no WordPress (Backend e Frontend)
No seu functions.php, vamos carregar o estilo tanto para o visitante quanto para o editor do Gutenberg, garantindo consistência visual.
<?php
function meu_tema_tailwind_setup() {
// Adiciona suporte a título, imagem destacada, etc.
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
// Faz o Gutenberg carregar o CSS do Tailwind no editor
add_theme_support('editor-styles');
add_editor_style('style.css');
}
add_action('after_setup_theme', 'meu_tema_tailwind_setup');
function meu_tema_tailwind_enqueue() {
// Carrega o CSS gerado no frontend
// O filemtime garante que o cache seja limpo quando o arquivo mudar
$version = file_exists(get_template_directory() . '/style.css')
? filemtime(get_template_directory() . '/style.css')
: '1.0';
wp_enqueue_style('tailwind-style', get_stylesheet_uri(), [], $version);
}
add_action('wp_enqueue_scripts', 'meu_tema_tailwind_enqueue');
Exemplo de Template (index.php)
Agora você pode usar as classes utilitárias diretamente no PHP.
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body <?php body_class('bg-gray-50 text-gray-800 antialiased'); ?>>
<header class="bg-white shadow-sm">
<div class="container mx-auto px-4 py-6">
<h1 class="text-3xl font-bold text-indigo-600">
<?php bloginfo('name'); ?>
</h1>
<p class="text-gray-500 mt-1"><?php bloginfo('description'); ?></p>
</div>
</header>
<main class="container mx-auto px-4 py-10">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article class="mb-8 p-6 bg-white rounded-lg shadow hover:shadow-md transition-shadow">
<h2 class="text-2xl font-semibold mb-2">
<a href="<?php the_permalink(); ?>" class="hover:text-indigo-600">
<?php the_title(); ?>
</a>
</h2>
<div class="prose max-w-none text-gray-600">
<?php the_excerpt(); ?>
</div>
</article>
<?php endwhile; endif; ?>
</main>
<?php wp_footer(); ?>
</body>
</html>
Cuidados Importantes (Developer Tips)
1. Classes Dinâmicas no PHP
O Tailwind não executa seu código PHP, ele apenas lê os arquivos de texto. NÃO FAÇA ISSO: <div class="bg-<?php echo $cor; ?>-500"> O scanner não encontrará a classe completa e ela não será gerada no CSS.
FAÇA ISSO: Use nomes de classes completos ou adicione as variações possíveis na safelist do tailwind.config.js.
2. Gutenberg e InnerBlocks
Para blocos nativos ou ACF, envolva o conteúdo com InnerBlocks e aplique classes no container pai:
<div class="p-8 bg-slate-100 rounded-xl border border-slate-200">
<InnerBlocks />
</div>
3. Produção e Performance
Sempre rode npm run build antes de subir para produção. Isso garante que o CSS seja minificado e que os comentários de licença desnecessários sejam removidos, mantendo apenas o cabeçalho do tema.