TailwindCSS

Table of contents

• My process
  • Built with
  • What I learned
  • Useful resources
  • Setup
  • Notes

My process

Built with

• Semantic HTML5 markup
• SASS
• Flexbox
• Mobile-first workflow
• Pug
• External animation

What I learned

• Ctrl+B: Open/ Close solution browser on vscode
• Ctrl+Shift+P -> choose simple browser

Useful resources

• Inline fold Extension
• Tailwind Docs
• Emojipedia
• Unicode Special Character

Setup

• Tailwind Installation Docs
• Define html (or orther extension) path to tailwind config file so that tailwind can know where to apply css.
• How to start a project:
  • install node js
  • npx tailwindcss init
  • npx tailwindcss -i .\src\input.css -o .\build\css\style.css --watch

Notes

• Tailwind v3+ inject JIT (Just in time) complier that mean only generate style when use the classes (It's not complie all in the first time)

• How to install a prettier and setup script. Prettier plugin will format tailwind classes in order.

• npm i -D prettier-plugin-tailwindcss

  • D: mean install dev dependencies

Define section to take up to full height medias: (min-aspect-ratio: 3/2) (min-aspect-ratio: 1/2) css: section { min-height: calc(100vh - [navbar-height]); }