0% found this document useful (0 votes)
67 views5 pages

React - Tailwind

Uploaded by

Lean
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
67 views5 pages

React - Tailwind

Uploaded by

Lean
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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

You might also like