Scribd
Upload
38 views

React - Tailwind

Uploaded by

Lean
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
38 views

React - Tailwind

Uploaded by

Lean
Copyright
© © All Rights Reserved
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