O WordPress ainda domina boa parte da web, mas isso não significa que o front-end precise ficar preso a temas genéricos ou estilos engessados. Integrar o Tailwind CSS ao WordPress permite modernizar completamente o visual, com controle total via classes utilitárias.
Esta integração é ideal para quem desenvolve temas próprios, temas filhos ou blocos customizados no editor Gutenberg.
Quando usar Tailwind no WordPress
-
Criação de temas personalizados do zero
-
Desenvolvimento de temas filhos com override de estrutura
-
Blocos personalizados com Gutenberg + ACF Blocks
-
Integração com plugins headless (como WPGraphQL)
Configurando Tailwind em um tema
1. Estrutura inicial
Dentro do diretório wp-content/themes, crie uma nova pasta, por exemplo meu-tema-tailwind, com a seguinte estrutura:
meu-tema-tailwind/
├── style.css
├── functions.php
├── index.php
├── tailwind.config.js
├── postcss.config.js
├── package.json
├── assets/
│ └── styles/
│ └── main.css
2. Inicializando o projeto
No terminal, dentro do tema:
npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Crie o postcss.config.js:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
3. Configurando arquivos Tailwind
No tailwind.config.js:
module.exports = {
content: [
"./**/*.php"
],
theme: {
extend: {},
},
plugins: [],
}
E no assets/styles/main.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
4. Gerando o CSS
No package.json, adicione um script de build:
"scripts": {
"build": "npx tailwindcss -i ./assets/styles/main.css -o ./style.css --minify"
}
E compile com:
npm run build
Habilitando o CSS no tema
No functions.php:
<?php
function meu_tema_tailwind_enqueue() {
wp_enqueue_style('tailwind-style', get_stylesheet_uri(), [], null);
}
add_action('wp_enqueue_scripts', 'meu_tema_tailwind_enqueue');
Usando Tailwind nos templates PHP
<!-- index.php -->
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class('bg-gray-100 text-gray-800'); ?>>
<div class="container mx-auto py-10">
<h1 class="text-3xl font-bold mb-4"><?php bloginfo('name'); ?></h1>
<p class="text-gray-600"><?php bloginfo('description'); ?></p>
</div>
<?php wp_footer(); ?>
</body>
</html>
Considerações sobre o purge
Como o Tailwind precisa escanear os arquivos .php, garanta que content: ["./**/*.php"] esteja corretamente definido. Evite usar class="<?= $variavel ?>" de forma desorganizada, ou use safelist no tailwind.config.js.
Integração com Gutenberg
Você pode usar Tailwind nos blocos padrão do Gutenberg e nos blocos criados com ACF, desde que o CSS final esteja disponível no front-end.
Para controle mais granular, crie blocos com suporte ao InnerBlocks, e aplique classes Tailwind diretamente:
<div class="p-6 bg-white rounded shadow">
<InnerBlocks />
</div>
Produção e cache
Use um plugin de cache como WP Rocket ou W3 Total Cache para minificar o HTML e evitar acúmulo de arquivos antigos. O Tailwind já gera um CSS enxuto em produção se o purge estiver corretamente configurado.
Vantagens da abordagem
-
Total controle visual direto no PHP
-
Estilo moderno sem depender de temas prontos
-
Ideal para projetos customizados ou freelancers