oliverdavies.uk/source/_talks/taking-flight-with-tailwind-css.md

---
title: Taking Flight with Tailwind CSS
description: An introduction to the utility-first approach to writing CSS with a focus on the Tailwind CSS framework.
speakerdeck:
    id: 10ca51f23560443d83b898a92929b4b3
    ratio: '1.77777777777778'
    url: https://speakerdeck.com/opdavies/taking-flight-with-tailwind-css
video:
    type: youtube
    id: lgsvKtpQp3U
tags: [css, tailwind, meetup]
events:
    -
        name: Drupal Bristol
        location: Bristol, UK
        date: 2018-01-17
        url: https://www.drupalbristol.org.uk
    -
        name: PHP South Wales
        location: Cardiff, UK
        date: 2018-07-31
        url: https://www.phpsouthwales.uk
    -
        name: Cheltenham WordPress Meetup
        location: Cheltenham, UK
        date: 2019-04-17
        url: https://www.meetup.com/Cheltenham-WordPress-Meetup
    -
        name: WordCamp Bristol 2019
        location: Bristol, UK
        date: 2019-05-18
        url: https://2019.bristol.wordcamp.org
    -
        name: Blue Conf 2019
        location: Cardiff, UK
        date: 2019-06-07
        url: https://blueconf.co.uk
    -
        name: CMS Philly
        location: Philadelphia, USA
        date: 2020-05-01
        url: https://cmsphilly.org
        online: true
    -
        name: PHP Hampshire
        location: Portsmouth, UK
        date: 2020-07-08
        url: https://www.meetup.com/meetup-group-yzpbvTYv/events/271430269
        online: true
    -
        name: Drupal Yorkshire
        location: Leeds, UK
        date: 2020-08-20
        url: https://www.meetup.com/DrupalYorkshire/events/zwzsfpybclbbc
        online: true
    -
        name: DigitalCamp Atlanta 2020
        location: Atlanta, GA
        date: 2020-09-11
        url: https://www.drupalcampatlanta.com/2020/sessions/taking-flight-tailwind-css
        online: true
    -
        name: Bristol JS
        location: Bristol, UK
        date: 2020-09-30
        url: https://techtalks.io/events/f8e26038-2561-484e-8a74-7a1e3a0369b8
        online: true
    -
        name: 'Drupal Virtual Cafe #3'
        location: Kyiv, Ukraine
        date: 2020-10-15
        url: https://groups.drupal.org/ukraine
        online: true
    -
        name: PHP Cambridge
        location: Cambridge, UK
        date: 2021-01-19
        url: https://www.meetup.com/phpcambridge
        online: true
    -
        name: Nashville PHP
        location: Nashville, TN, USA
        date: 2021-02-09
        url: https://www.meetup.com/nashvillephp/events/kzkdwryccdbmb
        online: true
meta:
    og:
        title: Taking Flight with Tailwind CSS
        description: An introduction to utility CSS and Tailwind.
        type: website
        image:
            url: '/images/talks/taking-flight-tailwind.jpg'
            width: 2560
            height: 1440
            type: 'image/png'
---

An introduction to utility class and component based styling, and how to soar with [Tailwind CSS][1].

Things we’ll cover:

- Advantages and disadvantages to utility based styling and Tailwind.
- How to install Tailwind and add it to your build process using tools such as Symfony Encore and Laravel Mix.
- How to configure and customise Tailwind for your project.
- How to promote repeating classes into re-usable components for better maintainability.
- Strategies to control the file size, and using external tools like PurgeCSS.

Also, if time allows:

- How to extend Tailwind and add extra classes with community written plugins.
- How to write and test your own custom plugins.

[1]: https://tailwindcss.com