2020-02-13

Deliberate Practice on CSS Box Model with Tailwind CSS

deliberate practice, tailwindcss, css, selfnote

banner

Image by Alexas_Fotos from Pixabay


title: Deliberate Practice on CSS Box Model with Tailwind CSS date: "2020-02-13" published: true tags: "deliberate practice, tailwindcss, css, selfnote" author: Sung M. Kim banner: ./images/featured-image.jpg bannerCredit: "Image by Alexas_Fotos from Pixabay"

As I learned about Deliberate Practice, I've decided to apply the concept to get used to the CSS box model using Tailwind CSS.

box model

From Wikipedia: CSS Box Model

I will share the list of Sandboxes I've used to deliberately practice to get used Tailwind utilities for the CSS Box Model.

Everyone has a different goal so you might just want to fork after setting your goal first.

So far I was focusing on each small section without applying them all.
I will do so next time to use all elements (padding/margin/border) involved.

Padding

  • Sandbox: https://codesandbox.io/s/practice-001-padding-whmtb
  • Tailwind: https://tailwindcss.com/docs/padding/

Margin

  • Sandbox: https://codesandbox.io/s/practice-007-margin-x6uci
  • Tailwind: https://tailwindcss.com/docs/margin/

Border

Width

  • Sandbox: https://codesandbox.io/s/practice-003-border-width-u7knp
  • Tailwind: https://tailwindcss.com/docs/border-width/

Style

  • Sandbox: https://codesandbox.io/s/practice-004-border-style-ge9iw
  • Tailwind: https://tailwindcss.com/docs/border-style/

Radius

  • Sandbox: https://codesandbox.io/s/practice-005-border-radius-545ns
  • Tailwind: https://tailwindcss.com/docs/border-radius

Color

  • Sandbox: https://codesandbox.io/s/practice-006-border-color-qkzon
  • Tailwind: https://tailwindcss.com/docs/border-color

Image by Alexas_Fotos from Pixabay