---
# System prepended metadata

title: Tailwind - SEI

---

# 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 
