React - Tailwind
O que é o Tailwind?
É um framework CSS baseado em classes utilitárias, ou seja, classes que tem um
único propósito.
Instalando o Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Adicione ao arquivo tailwind.config.js
React - Tailwind 1
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Adicione ao index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Instalando o Tailwind CSS Intellisense
React - Tailwind 2
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
Comandos básicos
text- texto
bg- background
m - margin (ml,mr,mt,mb)
p - padding
h - height
w - width
pseudo-classes - hover: | focus:
breakpoints (mobile-first) - sm, md,lg,xl
flex/grid - flex | justify-between | grid-cols-2
Adicionando classes personalizadas
As classes personalizadas devem ser adicionadas no arquivo tailwind.config.js.
module.exports = {
theme: {
extend: {
boxShadow: {
'3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
}
}
}
Adicionando cores personalizadas
/** @type {import('tailwindcss').Config} */
export default {
theme: {
React - Tailwind 3
extend: {
colors: {
primary: 'purple',
secundary: 'pink',
},
},
},
plugins: [],
}
Adicionando estilos personalizados para elementos
base, componentes e utilidades
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
}
@layer components {
.btn-blue {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py
}
}
@layer utilities {
.filter-none {
React - Tailwind 4
filter: none;
}
.filter-grayscale {
filter: grayscale(100%);
}
Bibliotecas
https://www.hover.dev/components/buttons
https://www.framer.com/motion/
https://ui.shadcn.com/
Referências
https://www.freecodecamp.org/portuguese/news/o-que-e-tailwind-css-um-guia-
para-iniciantes/
https://www.material-tailwind.com/
https://flowbite.com/
https://tailwindcss.com/
https://play.tailwindcss.com/
React - Tailwind 5
