tailwindcss-course

Curso de tailwindcss com Tiago Matos.

Estou usando nvm para escolher a versão do Node.

Meu gist nvm.

git clone https://github.com/rg3915/tailwindcss-custom-test.git
cd tailwindcss-custom-test

nvm use 18.3.0

npm init
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Instalação feita com Tailwind CLI.

Veja a configuração de src/input.css e tailwind.config.js.

Build

npx tailwindcss -i ./src/input.css -o ./dist/main.css

ou

npm run build

Rodando a app

Usei live-server.

npm install -g live-server

Run

live-server

Considerar no CSS

• display
• flexbox
• grid
• box-alignment
• spacing
• sizing
• typography
• background
• border
• effect
• table
• transition
• transform
• interactivity
• svg
• accessibility

Links

https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/quick-start

https://vueschool.io/articles/vuejs-tutorials/composing-layouts-with-vue-router/

https://heroicons.dev/

https://tailwind-elements.com/

https://tailwindcomponents.com/

http://pxtoem.com/