https://www.oliverdavies.uk/talks/tailwind
Taking Flight withTailwind CSSOliver Davies (@opdavies)
View Slide
@opdavies
What is Tailwind CSS?@opdavies
A utility-first CSS framework forrapidly building custom designs@opdavies
Tailwind CSS is a highlycustomisable, low-level CSSframework@opdavies
Tailwind is more than a CSSframework, it's an engine forcreating design systems@opdavies
• Text/border/background colours• Font size/family/weight• Alignment• Padding/margin/negative margin• Flexbox• Positioning• Lists• z-index• Opacity@opdavies
• Screenreader visibility• Placeholder colour• first-child, last-child, nth-child• CSS Grid• Transition• Transform• Spacing / Divide• Focus ring• Text clamping@opdavies
block inline flex grid@opdavies
text-sm text-base text-lgtext-xl text-2xl@opdavies
text-blue-50 text-blue-100text-blue-200 text-blue-300text-blue-400 text-blue-500@opdavies
How to use Tailwind@opdavies
Style elements by applyingpre-existing classes directly inyour HTML@opdavies
Using utility classes to buildcustom designs without writingCSS@opdavies
Benefits• You don't waste time and energy inventing class names.• No switching between CSS and HTML files.• Your CSS stops growing.• Reusability.• Making changes feels (and is) safer.@opdavies
Installation and Usage@opdavies
npm install --save-devtailwindcss@opdavies
npx tailwind--content index.html--output build/tailwind.css@opdavies
Interaction states@opdavies
hover, focus, active, disabled,visited, focus-within,first-child, last-child@opdavies
[state][separator][class]@opdavies
hover:text-red-500focus:text-red-500@opdavies
Interaction states in CSS1 .text-red-500 {2 color: #f56565;3 }45 .hover\:text-red-500:hover {6 color: #f56565;7 }89 .focus\:text-red-500:focus {10 color: #f56565;11 }@opdavies
Interaction states in HTML1 2 href="#"3 class="text-red-500 hover:text-red-800"4 >5 Read more6 @opdavies
Responsive@opdavies
[screen][separator][class]@opdavies
Screens (aka breakpoints)1 // defaultConfig.stub.js23 screens: {4 sm: '640px',5 md: '768px',6 lg: '1024px',7 xl: '1280px',8 },@opdavies
md:flexmd:hover:bg-red-500@opdavies
Responsive classes in CSS1 .block {2 display: block;3 }45 @media (min-width: 640px) {6 .sm\:block {7 display: block;8 }9 }@opdavies
Responsive classes in HTML1 2 3 Column 14 56 7 Column 28 9 @opdavies
Arbitrary values@opdavies
w-[23px] md:w-[250px]text-[#abc123]@opdavies
grid-cols-[fit-content(theme(spacing.32))]@opdavies
lg:[&:nth-child(3)]:hover:underline@opdavies
How I deal with repetition?@opdavies
Avoid repetition by extractingcomponents@opdavies
Loops1 {% for item in navItems %}2 3 class="block py-3 px-4 text-sm text-gray-800"4 href="{{ item.url }}"5 >6 {{ item.title }}7 8 {% endfor %}@opdavies
Loops1 {navItems.map(item => (2 3 class="block py-3 px-4 text-sm text-gray-800"4 href={item.url}5 >6 {item.title}7 8 ))}@opdavies
Includes1 Adults23 {% include 'class-list' with {4 classes: page.classes,5 type: 'adults',6 } %}78 Kids910 {% include 'class-list' with {11 classes: page.classes,12 type: 'kids',13 } %}@opdavies
Includes1 Adults23 45 Kids67 @opdavies
Extracting CSS components1 a.btn {2 @apply text-sm no-underline font-bold;3 @apply rounded-full inline-block px-5 py-2;4 @apply text-white bg-blue-600;56 @apply hover:bg-blue-700;7 }@opdavies
Extracting CSS components1 a.btn {2 font-size: 0.875rem;3 text-decoration: none;4 font-weight: 700;5 border-radius: 9999px;6 display: inline-block;7 padding-left: 1.25rem;8 padding-right: 1.25rem;9 padding-top: 0.5rem;10 padding-bottom: 0.5rem;11 color: #fff;12 background-color: #3182ce;13 }@opdavies
1415 a.btn:hover {16 background-color: #2b6cb0;17 }@opdavies
Keeping Things Small:Controlling the file size@opdavies
Just in Time (JIT mode)@opdavies
ContentTell Tailwind where it should look for utility classes.1 // tailwind.config.js23 module.exports = {4 mode: "jit",5 content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],6 // ...7 }@opdavies
Customising Tailwind@opdavies
npx tailwind init@opdavies
tailwind.config.js1 /** @type {import('tailwindcss').Config} */2 module.exports = {3 content: [],4 theme: {5 extend: {},6 },7 plugins: [],8 }@opdavies
Overriding configuration1 /** @type {import('tailwindcss').Config} */2 module.exports = {3 content: [],4 theme: {5 colors: {6 inherit: 'inherit'7 },8 extend: {},9 },10 plugins: [],11 }@opdavies
Extending configuration1 /** @type {import('tailwindcss').Config} */2 module.exports = {3 content: [],4 theme: {5 extend: {6 colors: {7 inherit: 'inherit'8 }9 },10 },11 plugins: [],12 }@opdavies
npx tailwind init --full@opdavies
Adding Tailwind to your CSS@opdavies
Including Tailwind1 /* src/css/tailwind.pcss */23 @tailwind base;45 @tailwind components;67 @tailwind utilities;@opdavies
Adding your own classes1 /* src/css/tailwind.pcss */23 @tailwind base;4 /* Custom base styles */56 @tailwind components;7 /* Custom components */89 @tailwind utilities;10 /* Custom utilities */@opdavies
Adding your own classes (with layers)1 /* src/css/tailwind.pcss */23 @tailwind base;4 @tailwind components;5 @tailwind utilities;67 @layer components {8 /* Custom components */9 }@opdavies
npx tailwind--input src/css/tailwind.pcss--output dist/tailwind.css@opdavies
Extending Tailwind CSS withPlugins@opdavies
npm install --save-devtailwindcss-list-reset@opdavies
Adding a plugin1 // tailwind.config.js23 module.exports = {4 theme: {5 extend: {},6 },7 plugins: [8 require('tailwindcss-list-reset')()9 ],10 variants: {},11 }@opdavies
Generated CSS1 .list-reset {2 list-style: none;3 padding: 0;4 }@opdavies
Writing plugins1 const plugin = require("tailwindcss/plugin");2@opdavies
Writing plugins1 const plugin = require("tailwindcss/plugin");23 module.exports = plugin(function({ addUtilities }) {45 })6@opdavies
Writing plugins1 const plugin = require("tailwindcss/plugin");23 module.exports = plugin(function({ addUtilities }) {4 addUtilities({5 '.list-reset': {6 listStyle: 'none',7 padding: 0,8 },9 })10 })11@opdavies
Writing pluginsAdding child and child-hover variants:1 const plugin = require('tailwindcss/plugin');23 module.exports = plugin(({ addVariant }) => {4 addVariant('child', '& > *');5 addVariant('child-hover', '& > *:hover');6 });@opdavies
Writing pluginsAdding a hocus variant:1 const plugin = require('tailwindcss/plugin');23 module.exports = plugin(({ addVariant }) => {4 addVariant('hocus', ['&:hover', '&:focus']);5 });@opdavies
Writing pluginsCreating a button component:1 const plugin = require("tailwindcss/plugin");23 module.exports = plugin(({ addComponents, theme }) {45 });6@opdavies
Writing plugins1 const plugin = require("tailwindcss/plugin");23 module.exports = plugin(({ addComponents, theme }) {4 let styles = {5 primary: {6 default: {7 backgroundColor: theme("colors.primary.DEFAULT"),8 border: `2px solid ${theme("colors.primary.dark")}`,9 borderRadius: "10px",10 color: theme("colors.white"),11 cursor: "pointer",12 padding: `${theme("padding.3")} ${theme("padding.12")}`,13 },@opdavies
1415 hover: {16 backgroundColor: theme("colors.white"),17 color: theme("colors.primary.DEFAULT"),18 },19 },20 }21 });22@opdavies
Writing plugins1 const plugin = require("tailwindcss/plugin");23 module.exports = plugin(({ addComponents, theme }) {45 // ...67 addComponents({8 "#edit-checkout.button": styles.primary.default,9 "#edit-checkout.button:hover, #edit-checkout.button:focus":10 styles.primary.hover,11 });12 });13@opdavies
Adding Tailwind CSS to anexisting project@opdavies
Disabling the reset styles1 /** @type {import('tailwindcss').Config} */2 module.exports = {3 content: [],4 theme: {5 extend: {},6 },7 corePlugins: {8 preflight: false,9 },10 plugins: [],11 }@opdavies
Prefixing class namesTurn classes like flex into tw-flex.1 /** @type {import('tailwindcss').Config} */2 module.exports = {3 prefix: "tw-",4 content: [],5 theme: {6 extend: {},7 },8 plugins: [],9 }@opdavies
!important1 /** @type {import('tailwindcss').Config} */2 module.exports = {3 important: true,4 content: [],5 theme: {6 extend: {},7 },8 plugins: [],9 }@opdavies
!important1 /** @type {import('tailwindcss').Config} */2 module.exports = {3 important: "#app",4 content: [],5 theme: {6 extend: {},7 },8 plugins: [],9 }@opdavies
!important!flex@opdavies
Demo@opdavies
Thanks!References:• https://tailwindcss.com• https://tailwindui.com• https://www.youtube.com/c/TailwindLabs• https://www.protailwind.com• https://drupal.org/project/tailwindcssMe:• https://www.oliverdavies.uk@opdavies
opdavies
chiroruxx
kthrtty
renjikari
odasho
mizunohiroaki
korodroid
sbtechnight
superbrothers
oracle4engineer
nttcom
sue445
bermonpainter
eitanlees
speakerdeck
gr2m
yeseniaperezcruz
addyosmani
jakevdp
pauljervisheath
sachag
tanoku
destraynor
bkeepers