autoscale: true
theme: Plain Jane, 1
# **Taking Flight with Tailwind CSS**
^ Tailwind CSS is a framework that I've been using for the last year and a half
Going to be using Tailwind 1.0 which was released recently (May 13th)
---
- PHP and Front End Developer
- System Administrator
- Senior Engineer at Inviqa
- Part-time freelancer
- Open sourcer
- @opdavies
- oliverdavies.uk
^ Co-organiser of PHP South Wales and DrupalCamp Bristol
---
---
# **What is Tailwind CSS?**
---
[.footer: tailwindcss.com]
# A **utility-first** CSS framework for rapidly building **custom designs**.
^ CSS utility class generator PostCSS Make different looking sites using the
same class names No "Tailwind looking site" like there is with Bootstrap
---
[.footer: tailwindcss.com]
# Tailwind CSS is a **highly customizable**, **low-level** CSS framework
^ No components like Bootstrap or Bulma Configure it per project Extendable if
needed via additional plugins Avoids the need to name things prematurely Can
extract components if needed (reusability)
---
[.footer: tailwindcss.com/docs/what-is-tailwind/#designed-to-be-customized]
# Tailwind is more than a CSS framework, it's an engine for **creating design systems**.
^ Good default values provided - colours, fonts, padding, widths Designing with
constraints. Using inline styles, every value is a magic number. With utilities,
you're choosing styles from a predefined design system, which makes it much
easier to build visually consistent UIs.
---
- Text/border/background colours
- Font size/family/weight
- Alignment
- Padding/margin/negative margin
- Flexbox
- Positioning
- Lists
- z-index
- Opacity
^ Some of the 'original' things that Tailwind would generate classes for.
---
- Screenreader visibility
- Placeholder colour
- first-child, last-child, nth-child
- CSS Grid
- Transition
- Transform
- Spacing / Divide
^ All generated from a single, customisable configuration file.
---
---
---
---
# **How do I use Tailwind?**
^ From the new tailwindcss.com website
---
# With Tailwind, you style elements by **applying pre-existing classes** directly in your HTML.
---
# Using **utility classes** to build custom designs **without writing CSS**
---
## **Benefits**
- You aren't wasting time and energy inventing class names
- Your CSS stops growing
- Making changes feels safer
^ No more adding silly class names like sidebar-inner-wrapper just to be able to
style something, and no more agonizing over the perfect abstract name for
something that's really just a flex container.
^ Using a traditional approach, your CSS files get bigger every time you add a
new feature. With utilities, everything is reusable so you rarely need to write
new CSS.
^ CSS is global and you never know what you're breaking when you make a change.
Classes in your HTML are local, so you can change them without worrying about
something else breaking.
---
---
^ Add padding with p-6
---
^ Rounded image - rounded-full
---
^ Centre image using mx-auto
---
^ Larger text - text-lg
---
^ Purple text - text-purple-500
---
^ Grey text - text-gray-600
---
^ Centre text - text-center
---
^ Responsive: enable flexbox on medium screens - md:flex
---
^ Remove margin around image - md:mx-0
---
^ Re-align text on medium screens - md:text-left
---
^ md:mr-6 - add margin to the side of the image on medium screens
---
^ Increase image size - md:h-24 md:w-24
---
^ Smaller view
---
# **How do I install Tailwind?**
---
# **1. Use the CDN**
---
[.footer: https://next.tailwindcss.com/docs/installation]
## **https://unpkg.com/tailwindcss/dist/tailwind.min.css**
---
[.footer: https://next.tailwindcss.com/docs/installation]
## **To get the most out of Tailwind, you really should install it via npm.**
^ - You can't customize Tailwind's default theme
- You can't use any directives like _@apply_, _@variants_, etc.
- You can't enable features like _group-hover_
- You can't install third-party plugins
---
## **2. Installing Tailwind via NPM**
---
## `npm install --save-dev` `tailwindcss`
## `yarn add -D tailwindcss`
^ Adds it as a dependency to your package.json file
---
## **Adding Tailwind to your CSS**
---
[.code-highlight: 2-7]
```css
/* src/css/app.pcss */
@tailwind base;
@tailwind components;
@tailwind utilities;
```
---
[.code-highlight: 5,9,13]
```
/* src/css/app.pcss */
@tailwind base;
/* Custom base styles go here */
@tailwind components;
/* Custom components go here */
@tailwind utilities;
/* Custom utilities go here */
```
---
## **Processing your CSS with Tailwind with the build command**
^ Compile the generated CSS Pass through PostCSS and Tailwind
---
# `npx tailwind build` `src/css/app.pcss` `-o dist/css/app.css`
---
```css
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-justify {
text-align: justify;
}
```
---
## **Processing your CSS with Tailwind with Laravel Mix**
---
# `npm install --save-dev laravel-mix`
---
```js
// webpack.mix.js
const mix = require('laravel-mix')
mix.postCss(
'src/css/app.pcss',
'dist/css',
[
require('tailwindcss')()
]
)
```
^ PostCSS - useful if you're including other PostCSS plugins like PostCSS Nested
---
```js
// webpack.mix.js
const mix = require('laravel-mix')
require('laravel-mix-tailwind')
mix.postCss('src/css/app.pcss', 'dist/css')
.tailwind()
```
---
```html
My new website
```
---
# `npm run dev`
# `npm run watch`
# `npm run prod`
---
# **Interaction states**
## hover, focus, active, disabled, visited, group-hover, focus-within, first-child, last-child...
^ Start to differ from inline styles
---
# `[state][separator][class]`
^ State = hover, focus, group focus, focus within Separator = configurable,
colon by default Class = the same utility class that you would have used
normally
---
# `hover:text-red-500`
---
```css
.text-red-500 {
color: #f56565;
}
.hover\:text-red-500:hover {
color: #f56565;
}
.focus\:text-red-500:focus {
color: #f56565;
}
```
---
```html
Read more
```
---
```js
// defaultConfig.stub.js
variants: {
alignContent: ['responsive'],
alignItems: ['responsive'],
alignSelf: ['responsive'],
appearance: ['responsive'],
backgroundAttachment: ['responsive'],
backgroundColor: ['responsive', 'hover', 'focus'],
backgroundPosition: ['responsive'],
backgroundRepeat: ['responsive'],
...
```
---
# **Responsive**
^ Mobile first
---
# [fit] `.[screen][separator][class]`
---
```js
// defaultConfig.stub.js
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
},
```
---
# `md:flex`
---
# `md:hover:bg-red-500`
---
```css
.block {
display: block;
}
@media (min-width: 640px) {
.sm\:block {
display: block;
}
}
@media (min-width: 768px) {
.md\:block {
display: block;
}
}
```
---
```html