### Intro In this small intro, I will help you understand how to think in TailwindCSS. We’ll go through a small theory intro 🤓(sorry in advance) and will jump next to a more hands-on 👋 exercise to practice what we learned. ### Why use Tailwind * **Simple and specific:** Most of the utilities included have specific functionality and don’t add extra styling to them (contrary to Bootstrap). * **Highly customizable:** Although it has a default configuration, we can simply override it in the `tailwind.config.js` file. * **Can be optimized:** We can use PurgeCSS in production to remove any classes we don’t use from Tailwind, only loading utilities we use. * **Easy to write:** As soon as you get used to it, it becomes super fast to write your CSS classes; you can also group classes into components by using `@apply`. * [other reasons](https://dev.to/joserfelix/why-use-tailwind-css-for-your-next-project-39hp) ### Some comments before we start * TailwindCSS doesn’t have JavaScript included, it is pure CSS. So if we want to make things dynamic we need to write our own JavaScript. * I will assume you know the basics of CSS 😄. * We won’t go through the installation of TailwindCSS, for that feel free to check their [installation guide](https://tailwindcss.com/docs/installation). * File locations are considered for Ruby on Rails. ### Configuration file TailwindCSS configuration lives in a file called `tailwind.config.js`. In this file, we can customize every TailwindCSS variable. ### How TailwindCSS works * **Utility Classes:** As with most frameworks, TailwindCSS uses utility classes to style HTML elements; its naming convention is super intuitive (`text-center`, `font-bold`, etc.). * **Prefixes:** We can add prefixes on different classes to make them work conditionally on different breakpoints or states. _For example:_ `_hover:font-bold_` _will change the font of the element to bold when hovered._ ### Prefixes **Responsive Design [(see docs)](https://tailwindcss.com/docs/responsive-design)** On TailwindCSS classes we can add a **breakpoint prefix** which will make it work conditionally at different breakpoints. **Usage** ```html <div class="md:w-92 lg:w-40">   [...] <div class="sm:text-center lg:text-left"> ``` ### Hover, Focus & other states As with the **responsive design**, we can use prefixes to style different states of our elements. **Usage** ```html <button class="bg-purple-600 hover:bg-purple-800">   Sign up </button> ``` ### Utility Classes Writing **TailwindCSS** utility classes keeps the same structure among most CSS properties. We’ll go through some examples to clarify how the structure works, but feel free to find any specific utility class on their amazing [**documentation**](https://tailwindcss.com/docs). ### Fonts [**Font Family**](https://tailwindcss.com/docs/font-family) **→** `font-family` **→** `font-{type}` ```html <p class="font-sans ..."> <p class="font-serif ..."> <p class="font-mono ..."> ``` _Note:_ `font-sans`_,_ `font-serif` _and_ `font-mono` _are variables that we can change in our config file to the_ `font-family` _of our choice._ [**Font Size**](https://tailwindcss.com/docs/font-size) **→** `font-size` **→** `text-{size}` ```html <p class="text-xs ...">The quick brown fox ...</p> <p class="text-xl ...">The quick brown fox ...</p> ``` [**Font Weight**](https://tailwindcss.com/docs/font-weight) **→** `font-weight` **→** `font-{weight}` ```html <p class="font-bold ...">The quick brown fox ...</p> <p class="font-thin ...">The quick brown fox ...</p> ``` [**Text Align**](https://tailwindcss.com/docs/text-align) **→** `text-align` **→** `text-{alignment}` ```html <p class="text-left ...">Lorem ipsum dolor sit amet ...</p> <p class="text-center ...">Lorem ipsum dolor sit amet ...</p> ``` ### Container The `container` class will fix the element width depending on the current breakpoint. [Container](https://tailwindcss.com/docs/container) **→** `width` ```html <div class="container">   <!-- ... --> </div> ``` ### Margin & Padding [**Margin**](https://tailwindcss.com/docs/margin) **→** `margin` **→** `m{direction}-{size}` ```html <div class="mt-8 ...">mt-8</div> <div class="m-5 ...">m-5</div> ``` Left + Right → `mx` Top + Down → `my` [**Padding**](https://tailwindcss.com/docs/padding) **→** `padding` **→** `p{direction}-{size}` ```html <div class="pb-3 ...">pb-4</div> <div class="py-2 ...">py-2</div> ``` Left + Right ⇒ `px` Top + Down ⇒ `py` ### Colors The color class utilities allow us to use the same kind of syntax to style different properties. `{property}-{color}-{value}` ```html <p class="text-purple-600 ..."></p> <button class="bg-green-500 ...">Button</button> <input class="border-2 border-red-500 ..."> ``` ### Width and Height [**Height**](https://tailwindcss.com/docs/height) **→** `height` **→** `h{direction}-{size}` ```html <div class="h-12 ..."></div> <div class="h-16 ..."></div> ``` [**Width**](https://tailwindcss.com/docs/width) **→** `width` **→** `w{direction}-{size}` ```html <div class="w-20 ..."></div> <div class="w-28 ..."></div> ``` ### Display No rocket science here, just classes that apply different display properties. `flex` **→** `display: flex` `inline-block` **→** `display: inline-block` `hidden` **→** `display: none` ### Creating components [(see more)](https://tailwindcss.com/docs/extracting-components) Sometimes when repeating classes over and over on the same elements (buttons, avatars, etc.), it’s better to refactor our code creating components that help us to update and reuse our code. **TailwindCSS** includes the `@apply` directive that extracts common utility patterns to CSS component classes. ```scss .btn-indigo {   @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75; } ``` ```html <button class="btn-indigo">   Click me </button> ``` TailwindCSS also recommends wrapping the styles where we use `@apply` with `@layer components { }` so it can recognize that those styles belong to the `components`([performance and organization reasons](https://tailwindcss.com/docs/extracting-components)). ### Enough theory! Let’s create a Components Kitchen Sink _Note: We will be working on an already created Ruby on Rails app with TailwindCSS using the amazing boilerplate [**_BambooSticks_**](https://github.com/mangotreedev/bamboosticks) 😉.  ### Main Header Let’s start styling our main header.  ```html <h1 class="text-5xl font-semibold text-center">Kitchen Sink</h1> ``` **What utilities did we use?** * `text-5xl` → `font-size` and `line-height` * `font-semibold` **→** `font-weight` * `text-center` → `text-align` ### Container Now let’s add a simple container so we can center our components later.  **What new utilities did we use?** * `container` **→** `max-width` on breakpoint (`sm`, `md`, `lg`, `xl`, `2xl`) * `mx-auto` **→** `margin-left` and `margin-right` * `my-3` **→** `margin-top` **and** `margin-bottom` ### Avatars Let’s now play with some image properties by creating avatars.  _Omg those guys are handsome_ **What new utilities did we use?** * `rounded-full` **→** `border-radius` (same as `border-radius: 50%`) which will make all borders rounded. If the image is a square it will create a circle. * `h-24` **&** `w-24` **→** `weight` **and** `height` * `inline-block` **→** `display` ### Buttons Ok, now let’s do a primary and secondary button.  _Both are called Benjamin… get it?_ **What new utilities did we use?** * `px-12` **/** `py-3` **→** `padding-left` **and** `padding-right` **/** `padding-up` **and** `padding-bottom` * `bg-yellow-400` **→** `background-color` * `border-yellow-400` **→** `border-color` * `hover:bg-yellow-300` **→** `background-color` on `:hover` * `focus:outline-none` **→** `background-color` on `:focus` * `text-white` **→** `color` * `rounded` **→** `border-radius` * `border` **→** `border-width` * `transition` **→** `transition` (with a transition delay of 150ms) * `duration-300` **→** `transition-duration` * `inline-block` **→** `display` ### Banner  **What new utilities did we use?** * `bg-cover` **→** `background-size` * `flex` **→** `display` * `items-center` **→** `align-items` * `text-shadow` **→** ❗This is a custom class I made, there is no text-shadow utility class on TailwindCSS❗ ### Category Card  _This card peels amazing…_ **What new utilities did we use?** * `justify-center` **→** `justify-content` * `shadow-xl` **→** `box-shadow` ### Product Card  **What new utilities did we use?** * `object-cover` **→** `object-fit` * `flex-col` **→** `flex-direction` * `p-5` **→** `padding` * `rounded-l` **→** `border-top-left-radius` and `border-bottom-left-radius` ### Party Card  **What new utilities did we use?** * `rounded-t` **→** `border-top-left-radius` and `border-top-right-radius` * `w-full` **→** `width: 100%` * `items-end` **→** `align-items` ### Extracting components All our refactoring will be in separate files called with the name of the specific component in the folder `app/javascript/stylesheets/components`. ### Buttons We will extract all the common classes from our buttons in the `.btn` class and create two specific classes (`.btn-main` and `.btn-ghost`) for the different versions of buttons we have. And we are done! **Congratulations**!  _👉🏻_ [_Link to the Ruby on Rails application with all the components_](https://github.com/nicoproto/tailwindcss-tutorial)