Taking Flight with Tailwind CSS

1.

Taking Flight with Tailwind CSS

2.

• PHP and Front End Developer • System Administrator •
Senior Engineer at Inviqa • Part-<me freelancer • Open sourcer • @opdavies • oliverdavies.uk

3.

None

4.

What is Tailwind CSS?

5.

A u"lity-ﬁrst CSS framework for rapidly building custom designs. tailwindcss.com

6.

Tailwind CSS is a highly customizable, low-level CSS framework tailwindcss.com

7.

Tailwind is more than a CSS framework, it's an engine
for crea%ng design systems. tailwindcss.com/docs/what-is-tailwind/#designed-to-be-customized

8.

• Text/border/background colours • Font size/family/weight • Alignment • Padding/margin/nega>ve
margin • Flexbox • Posi>oning • Lists • z-index • Opacity

9.

• Screenreader visibility • Placeholder colour • ﬁrst-child, last-child, nth-child
• CSS Grid • Transi;on • Transform • Spacing / Divide

10.

None

11.

None

12.

None

13.

How do I use Tailwind?

14.

With Tailwind, you style elements by applying pre-exis.ng classes directly
in your HTML.

15.

Using u"lity classes to build custom designs without wri"ng CSS

16.

Beneﬁts • You aren't was.ng .me and energy inven.ng class
names • Your CSS stops growing • Making changes feels safer

17.

None

18.

None

19.

None

20.

None

21.

None

22.

None

23.

None

24.

None

25.

None

26.

None

27.

None

28.

None

29.

None

30.

None

31.

How do I install Tailwind?

32.

1. Use the CDN

33.

h"ps:/ /unpkg.com/tailwindcss/dist/ tailwind.min.css h"ps:/ /next.tailwindcss.com/docs/installa4on

34.

To get the most out of Tailwind, you really should
install it via npm. • You can't use any direc1ves like @apply, @variants, etc. • You can't enable features like group-hover • You can't install third-party plugins h"ps:/ /next.tailwindcss.com/docs/installa4on

35.

2. Installing Tailwind via NPM

36.

npm install --save-dev tailwindcss yarn add -D tailwindcss

37.

Adding Tailwind to your CSS

38.

/* src/css/app.pcss */ @tailwind base; @tailwind components; @tailwind utilities;

39.

/* src/css/app.pcss */ @tailwind base; /* Custom base styles go
here */ @tailwind components; /* Custom components go here */ @tailwind utilities; /* Custom utilities go here */

40.

Processing your CSS with Tailwind with the build command

41.

npx tailwind build src/css/app.pcss -o dist/css/app.css

42.

.text-left { text-align: left; } .text-center { text-align: center; }
.text-right { text-align: right; } .text-justify { text-align: justify; }

43.

Processing your CSS with Tailwind with Laravel Mix

44.

npm install --save-dev laravel-mix

45.

// webpack.mix.js const mix = require('laravel-mix') mix.postCss( 'src/css/app.pcss', 'dist/css', [
require('tailwindcss')() ] )

46.

// webpack.mix.js const mix = require('laravel-mix') require('laravel-mix-tailwind') mix.postCss('src/css/app.pcss', 'dist/css') .tailwind()

47.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>My new
website</title> <link rel="stylesheet" href="/dist/css/app.css" /> </head> <body></body> </html>

48.

npm run dev npm run watch npm run prod

49.

Interac(on states hover, focus, ac-ve, disabled, visited, group-hover, focus-within, ﬁrst-child,
last-child...

50.

[state][separator][class]

51.

hover:text-red-500

52.

.text-red-500 { color: #f56565; } .hover\:text-red-500:hover { color: #f56565; }
.focus\:text-red-500:focus { color: #f56565; }

53.

<a href="#" class="text-red-500 hover:text-red-800"> Read more </a>

54.

// defaultConfig.stub.js variants: { alignContent: ['responsive'], alignItems: ['responsive'], alignSelf: ['responsive'],
appearance: ['responsive'], backgroundAttachment: ['responsive'], backgroundColor: ['responsive', 'hover', 'focus'], backgroundPosition: ['responsive'], backgroundRepeat: ['responsive'], ...

55.

Responsive

56.

.[screen][separator][class]

57.

// defaultConfig.stub.js screens: { sm: '640px', md: '768px', lg: '1024px',
xl: '1280px', },

58.

md:flex

59.

md:hover:bg-red-500

60.

.block { display: block; } @media (min-width: 640px) { .sm\:block
{ display: block; } } @media (min-width: 768px) { .md\:block { display: block; } }

61.

<div class="block md:flex"> <div class="w-full md:w-1/2"> Column 1 </div> <div
class="w-full md:w-1/2"> Column 2 </div> </div>

62.

Keeping Things Small: Controlling the File Size

63.

Disabling unused variants and core plugins

64.

// tailwind.config.js variants: { alignContent: ['responsive'], alignItems: ['responsive'], alignSelf: ['responsive'],
appearance: ['responsive'], backgroundAttachment: ['responsive'], backgroundColor: ['responsive', 'hover', 'focus'],

65.

// tailwind.config.js variants: { alignContent: ['responsive'], alignItems: ['responsive'], - alignSelf:
['responsive'], + alignSelf: false, appearance: ['responsive'], backgroundAttachment: ['responsive'], - backgroundColor: ['responsive', 'hover', 'focus'], + backgroundColor: ['responsive'],

66.

Manually removing unused or unwanted classes

67.

screens: { sm: '640px', md: '768px', lg: '1024px', xl: '1280px',
}, colors: { transparent: 'transparent', black: '#000', white: '#fff', gray: { 100: '#f7fafc', 200: '#edf2f7', 300: '#e2e8f0', 400: '#cbd5e0', 500: '#a0aec0', 600: '#718096', 700: '#4a5568', 800: '#2d3748', 900: '#1a202c', },

68.

screens: { sm: '640px', md: '768px', lg: '1024px', - xl:
'1280px', }, colors: { transparent: 'transparent', black: '#000', white: '#fff', gray: { 100: '#f7fafc', - 200: '#edf2f7', 300: '#e2e8f0', - 400: '#cbd5e0', - 500: '#a0aec0', 600: '#718096', 700: '#4a5568', - 800: '#2d3748', 900: '#1a202c', },

69.

Automa'cally removing unused classes

70.

npm install --save-dev laravel-mix-purgecss

71.

const mix = require('laravel-mix') mix.postCss('src/css/site.css', 'dist/css').purgeCss({ folders: ['templates'], extensions: ['html',
'php', 'twig'], })

72.

const mix = require('laravel-mix') require('laravel-mix-purgecss') mix.postCss('src/css/site.css', 'dist/css').purgeCss({ folders: ['templates'], extensions:
['html', 'php', 'twig'], })

73.

PurgeCSS is now included by default with Tailwind 1.4

74.

module.exports = { purge: [ './src/**/*.html', './src/**/*.vue', './src/**/*.jsx', ], theme:
{}, variants: {}, plugins: [], }

75.

Avoid repe**on by extrac'ng components

76.

Does something jus$fy becoming a component?

77.

Could the duplica.on be moved elsewhere?

78.

{# base.html.twig #} {% for item in navItems %} <a
class="block py-3 px-4 text-sm text-gray-800" href="{{ item.url }}" > {{ item.title }} </a> {% endfor %}

79.

{# classes.html.twig #} <h2>Adults</h2> {% include 'class-list' with { classes:
page.classes, type: 'adults', } %} <h2>Kids</h2> {% include 'class-list' with { classes: page.classes, type: 'kids', } %}

80.

a.btn { @apply text-sm no-underline font-bold; @apply rounded-full inline-block px-5
py-2; @apply text-white bg-blue-600; } a.btn:hover { @apply bg-blue-700; }

81.

a.btn { font-size: 0.875rem; text-decoration: none; font-weight: 700; border-radius: 9999px;
display: inline-block; padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 0.5rem; padding-bottom: 0.5rem; color: #fff; background-color: #3182ce; } a.btn:hover { background-color: #2b6cb0; }

82.

Customising Tailwind

83.

npx tailwind init

84.

// tailwind.config.js module.exports = { theme: { extend: {}, },
plugins: [], variants: {}, }

85.

// tailwind.config.js module.exports = { theme: { colors: { inherit:
'inherit', }, extend: {}, }, plugins: [], variants: {}, }

86.

// tailwind.config.js module.exports = { theme: { extend: { colors:
{ inherit: 'inherit', }, }, }, plugins: [], variants: {}, }

87.

// tailwind.config.js module.exports = { prefix: '', important: false, theme:
{ extend: {}, }, plugins: [], variants: {}, }

88.

npx tailwind init --full

89.

Extending Tailwind CSS with Plugins

90.

npm install --save-dev tailwindcss-list-reset

91.

// tailwind.config.js module.exports = { theme: { extend: {}, },
plugins: [require('tailwindcss-list-reset')()], variants: {}, }

92.

.list-reset { list-style: none; padding: 0; }

93.

// index.js module.exports = variants => ({addUtilities}) => { addUtilities(
{ '.list-reset': { listStyle: 'none', padding: 0, }, }, variants, ) }

94.

Demo

95.

Useful links • tailwindcss.com • tailwindui.com • builtwithtailwind.com • youtube.com/adamwathan
• drupal.org/project/tailwindcss • oliverdavies.uk/tags/tailwind-css • oliverdavies.uk/tailwind-repos

96.

Ques%ons? oliverdavies.uk/tailwind-talk @opdavies

Taking Flight with Tailwind CSS

Taking Flight with Tailwind CSS

Want more?

Transcript