Tailwind CSS é uma estrutura CSS de código aberto. A principal característica desta biblioteca é que, ao contrário de outros frameworks CSS como o Bootstrap, ela não fornece uma série de classes predefinidas para elementos como botões ou tabelas
- Tailwind CSS
- Site: https://tailwindcss.com/
- Bootstrap
Instalando o Tailwind CSS
-
Instalar o NodeJS
-
NodeJS
- Site: https://nodejs.org/en
-
TailwindCSS
-
Instalar no terminal no vscode
npm install -D tailwindcss
- Iniciar o TailwindCSS (Criar o arquivo
tailwind.config.js
)
npx tailwindcss init
- Comando
npx tailwindcss -i ./src/input.css -o ./app/assets/css/app.css --watch
Text Color
Center Text
TailwindCSS
O que é o tailwindcss?
-
É uma framework de CSS baseada no conceito utility-first
-
É diferente do Bootstrap, MaterialUI, etc...
-
Essas bibliotecas são mais "opinativas"
-
O tailwindcss aplica várias classes no mesmo elemento
-
Tailwind CSS
- Site: https://tailwindcss.com/
Instalação do Tailwind CLI
-
Instalar o NodeJS
-
NodeJS
- Site: https://nodejs.org/en
-
Verificar a versão do nodejs instalado (terminal)
node -v
-
Instalar o tailwindcss
-
Passo 1
- Comando (terminal)
npm install tailwindcss
- Exemplo
- tailwind_css-01
- Passo 1
- Inicia o Tailwind no projeto (terminal) (
tailwind.config.js
)
npx tailwindcss init
Utility-First Fundamentals
-
Utility-First: https://tailwindcss.com/docs/utility-first
-
Extenção VSCode
Live Server
- settings/full reload/checked
Tailwind CSS IntelliSense
`
-
Exemplo
- tailwind_css-02
-
Functions and Directives:
-
Passo 2
tailwind.config.js
'./build/*.html'
-
Passo 3
-
Passo 4
npx tailwindcss -i ./src/input.css -o ./build/assets/css/app.css --watch
- Exemplo
- tailwind_css-03
- Exemplo
- tailwind_css-04