# Tailwind - SEI ## Objectives * Define what front-end CSS frameworks are * Demonstrate ability to read documentation and implement an unfamiliar framework * Utilize a front-end grid system for mobile and desktop layout ## Tailwind ### Background Readings <!-- how was it made, by who, for who, and why --> [CSS Utility Classes and Serparation of Concerns](https://adamwathan.me/css-utility-classes-and-separation-of-concerns/), by Adam Wathan about other styling mindsets (like BEM) [Tailwind CSS: From Side-Project Byproduct to Multi-Million Dollar Business](https://adamwathan.me/tailwindcss-from-side-project-byproduct-to-multi-mullion-dollar-business/), by Adam Wathan about his work with Steve Schoger to build and release Tailwind ### Tailwind's Approach <!-- things to understand, how it comes out of box --> - utility first: uses classes to build design without writing css - optimized for production - screen responsiveness built in [Preflight Style Reset](https://tailwindcss.com/docs/preflight#default-margins-are-removed) - headers and lists are all unstyled, lists should have a [list role](https://tailwindcss.com/docs/preflight#accessibility-considerations) for accessibility. [Utility classes > inline styles](https://tailwindcss.com/docs/utility-first#why-not-just-use-inline-styles) - inline styles: community considers inline styles to be bad practice, inline doesn't allow active states or responsive design, doesn't keep single source of truth [Mobile First](https://tailwindcss.com/docs/responsive-design#mobile-first) - class names without a size prefix (sm, md, lg) will apply on all screen sizes, but prefixed utilities only happen at that breakpoint and above. ### How to include it [Installation Docs](https://tailwindcss.com/docs/installation) 1. Play CDN (for development only) 2. Tailwind CLI (package manager for production) ### How to start playing <!-- personal approach to learning new css framework --> * understand what you want to do -> mockups & wireframes * understand what the standards are -> tailwind documentation * reference relevant css properties -> csstricks.com ### Learn From Documentation #### Display Support for all different kinds of display values listed [here](https://tailwindcss.com/docs/display), including [flex](https://tailwindcss.com/docs/display#flex) & [grid](https://tailwindcss.com/docs/display#grid). > Use `invisible` to hide an element, but still maintain its place in the DOM, https://tailwindcss.com/docs/visibility #### Grid * [template columns](https://tailwindcss.com/docs/grid-template-columns) * [template rows](https://tailwindcss.com/docs/grid-template-rows) * [column start/end](https://tailwindcss.com/docs/grid-column) * [row start/end](https://tailwindcss.com/docs/grid-row) * [gap](https://tailwindcss.com/docs/gap) Assign the number of columns in the grid by affixing the number after `grid-cols-`, and create rows in the same way. The `start/end` properties assign which grid areas the element will span. | CSS Property | Tailwind Syntax | | ---------------- | ------------------------ | | template columns | grid-cols-1 | | template rows | grid-rows-2 | | column start/end | col-start-3, col-end-4 | | row start/end | row-start-5, row-start-6 | | gap | gap-7 | #### Spacing * [padding](https://tailwindcss.com/docs/padding) * [margin](https://tailwindcss.com/docs/margin) | CSS Property | Tailwind Syntax | | ------------ | --------------- | | padding | p-1 | | margin | m-2 | Tailwind supports side specific styling by affixing a letter to the `p` or `m` respectively. | Box Side | Tailwind Syntax | | ---------- | --------------- | | horizontal | \*x-1 | | vertical | \*y-2 | | top | \*t-3 | | right | \*r-4 | | left | \*l-5 | | bottom | \*b-6 | #### Text Align | CSS Property | Tailwind Syntax | | ------------ |:--------------- | | text-align | text-center | #### Borders #### Colors Tailwind comes with a default color palette, but supports customization. [How to use one-off custom color](https://tailwindcss.com/docs/customizing-colors#arbitrary-values). [Here is a color chart](https://tailwindcss.com/docs/customizing-colors) which shows the name of the color and the vibrancy of the color at various number values. ![Color chart, showing Stone and Red shades](https://i.imgur.com/m1uOws7.png) To set a color, use the color name and number, and affix them to the element you want to style. Set the background color to #fafaf9 like this:`bg-stone-50`. #### Other Notables - [object-fit](https://tailwindcss.com/docs/object-fit) - [flex basis](https://tailwindcss.com/docs/flex-basis) #### Responsive Design [chart with breakpoints and prefixs](https://tailwindcss.com/docs/responsive-design) <!-- ### Examples --> <!-- #### Buttons --> <!-- #### Headers --> #### COOL CODEPENS animate: https://codepen.io/chris__sev/pen/XWXvMMg?editors=1000 ping: https://codepen.io/marksunming/pen/wvJvGPv?editors=1000 hover: https://codepen.io/lovasoa/pen/pMqNZJ