opdavies/talks
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity
talks/taking-flight-with-tailwind-css/2018-01-17-drupal-bristol/slides.md
Oliver Davies 53b6bc307c Add Tailwind talk
2018-01-17 22:50:48 +00:00

6.8 KiB
Raw Blame History

autoscale: true build-lists: true theme: Fira, 1

[.hide-footer]

[fit] Taking Flight with
Tailwind CSS

[.build-lists: false]

  • Full Stack Web Developer
  • Acquia certified Drupal specialist
  • @opdavies
  • oliverdavies.uk

A Utility-First CSS Framework for Rapid UI Development

^ What is Tailwind?

[.build-lists: false]

  • Utility CSS class generator
  • PostCSS
  • Configurable
  • Some preprocessor features
  • Can be used in addition to preprocessors
  • Open source

^ Works with plain CSS or any preprocessor Can be configured to enable/disable modules, configure colours etc. Can use features like variables if using plain CSS.

.title {
    background-color: #3490DC;
    color: #FFF;
    display: block;
    font-size: 1.5rem;
    padding: 2rem;
}

.text-2xl {
    font-size: 1.5rem;
}

.bg-blue {
    background-color: #3490DC;
}

.text-white {
    color: #FFF;
}

<div class="text-2xl bg-blue-dark text-white p-8">
    <p>Hello, Drupal Bristol!</p>
</div>

fit

Installation

Option 1

https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css

Option 2

yarn add postcss tailwindcss --save

yarn run tailwind init

^ Install with npm or Yarn Run "tailwind init" to generate a default tailwind.js file

// tailwind.js

var colors = {
  'transparent': 'transparent',

  'black': '#222b2f',
  'grey-darkest': '#364349',
  'grey-darker': '#596a73',
  'grey-dark': '#70818a',
  'grey': '#9babb4',
  'grey-light': '#dae4e9',
  'grey-lighter': '#f2f2f2',
  'grey-lightest': '#fafcfc',
  'white': '#ffffff',
  ...

// postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss')('./tailwind.js'),
    require('autoprefixer'),
  ]
}

// main.less

@tailwind preflight;

// Any custom styles.

@tailwind utilities;

// webpack.config.js

Encore
    ...
    .enableLessLoader()
    .addStyleEntry('site', './less/main.less')
    .enablePostCssLoader(function(options) {
        options.config = {
            path: 'postcss.config.js'
        };
    })
    ...
;

^ Using Webpack Encore

<head>
    <title>Hello, World!</title>
    <link rel="stylesheet" href="/build/site.css">
...

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

<div class="text-bold text-red bg-blue">
    Hello, world!
</div>

Configuration

// tailwind.js

var colors = {
  ...

  'blue-darkest': '#05233b',
  'blue-darker': '#103d60',
  'blue-dark': '#2779bd',
  'blue': '#0678be',
  'blue-light': '#6cb2eb',
  'blue-lighter': '#bcdefa',
  'blue-lightest': '#eff8ff',

  ...
}

^ Add, change, remove values as needed

screens: {
  'sm': '576px',
  'md': '768px',
  'lg': '992px',
  'xl': '1200px',
}

textSizes: {
  'xs': '.75rem',     // 12px
  'sm': '.875rem',    // 14px
  'base': '1rem',     // 16px
  'lg': '1.125rem',   // 18px
  'xl': '1.25rem',    // 20px
  '2xl': '1.5rem',    // 24px
  '3xl': '1.875rem',  // 30px
  '4xl': '2.25rem',   // 36px
  '5xl': '3rem',      // 48px
}

width: {
  'auto': 'auto',
  'px': '1px',
  '1': '0.25rem',
  '2': '0.5rem',
  '3': '0.75rem',
  '4': '1rem',
  '6': '1.5rem',
  '8': '2rem',
  '10': '2.5rem',
  '12': '3rem',
  '16': '4rem',
  '24': '6rem',
  ...
}

padding: {
  'px': '1px',
  '0': '0',
  '1': '0.25rem',
  '2': '0.5rem',
  '3': '0.75rem',
  '4': '1rem',
  '5': '1.25rem',
  '6': '1.5rem',
  '8': '2rem',
  '16': '4rem',
}

options: {
  prefix: '',
  important: false,
  separator: ':',
}

^ - Drupal important config

  • By adding a prefix, we don't clash with Drupal's core styles - e.g. ".block"

[.build-lists: false]

  • Colours (text and background)
  • Font family, size, weight
  • Leading (line height), tracking (letter spacing)
  • Border widths, colours, radius
  • Width, height, min/max width/height

[.build-lists: false]

  • Padding, margin (positive and negative)
  • Shadows
  • Z-index
  • Opacity
  • SVG fill, stroke
  • Screen sizes (breakpoints)

States

Hover, Focus, Active

.{state}{separator}{class}

<a class="bg-grey hover:bg-grey-dark focus:bg-grey-dark" href="/">
    Home
</a>

Responsive

.{screen}{separator}{class}

<div class="block sm:inline-block md:flex lg:block">
    <p>Hello, World!</p>
</div>

Extracting
Components

{% for item in items %}
    <a class="block py-3 px-4 text-sm text-grey" href="{{ item.url }}">
        {{ item.title }}
    </a>
{% endfor %}

<a href="inline-block rounded text-sm py-2 px-3 text-white bg-red">
    Click me!
</a>

<a href="inline-block rounded text-sm py-2 px-3 text-white bg-green">
    Click me too!
</a>

// main.less

.button {
    .inline-block;
    .rounded;
    .text-sm;
    .py-2;
    .px-3;
    .text-white;
}

# main.css

.button {
    @apply .inline-block;
    @apply .rounded;
    @apply .text-sm;
    @apply .py-2;
    @apply .px-3;
    @apply .text-white;
}

<a href="button bg-red">
    Click me!
</a>

<a href="button bg-green">
    Click me too!
</a>

// table.less

.table-responsive {
    @apply .mb-4 .border .w-full;
    overflow-x: auto;
    overflow-y: hidden;
}

.table-responsive table {
    @apply .mb-0 .border-0 .whitespace-no-wrap;
}

.table {
    @apply .w-full .table-collapse;
}

.table tr:nth-child(odd) {
    @apply .bg-grey-lightest;
}

.table tr th {
    @apply .text-left .p-3 .bg-white;
}

.table td {
    @apply .px-3 .py-3 .border-t;
}

Advantages

  • Quick to prototype and make changes
  • Write less CSS
  • More consistency
  • Easy to customise, promote to components
  • Mix and match with normal CSS

^ Do more with browser dev tools Only picking from pre-defined colours, widths. No magic numbers. Less ramp-up time as using the same framework on different sites. Same classes, but no visual similarities like with other frameworks like Bootstrap

Disadvantages

  • Extra build tools and steps
  • Lots of classes in markup
  • Large file size by default

^ - Need a build tool (Gulp, Grunt, Webpack) to build CSS

For Drupal

  • Add a prefix to avoid clashing
  • Enable important setting to override existing styles
  • Add classes in templates where possible
  • Use @apply to limit the number of templates, to avoid adding classes in PHP code or config (e.g. Views), to style hard-to-reach elements

Resources

  • tailwindcss.com
  • tailwindcomponents.com
  • github.com/merchedhq/awesome-tailwindcss
  • youtube.com/adamwathan
  • github.com/opdavies/oliverdavies.uk
  • github.com/phpsw/phpsw-ng

Thank you

@opdavies