---
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:
    id: C20QZbGlmZ8
    type: youtube
events:
    -
        name: DrupalCamp Belgium
        location: Ghent, Belgium
        date: 2024-05-11
        url: https://www.drupalcamp.be/en/drupalcamp-ghent-2024/session/taking-flight-tailwi%E2%80%A6
    -
        name: Norfolk Developers Conference
        location: Norwich, UK
        date: 2023-02-23
        url: https://nordevcon.com
    -
        name: Bristol Software Development Meetup
        location: Bristol, UK
        date: 2023-02-16
        url: https://www.meetup.com/south-wales-tech/events/291092930
    -
        name: Nashville PHP
        location: Nashville, TN, USA
        date: 2021-02-09
        url: https://www.meetup.com/nashvillephp/events/kzkdwryccdbmb
        online: true
    -
        name: PHP Cambridge
        location: Cambridge, UK
        date: 2021-01-19
        url: https://www.meetup.com/phpcambridge
        online: true
    -
        name: "Drupal Virtual Cafe #3"
        location: Kyiv, Ukraine
        date: 2020-10-15
        url: https://groups.drupal.org/ukraine
        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: DigitalCamp Atlanta 2020
        location: Atlanta, GA
        date: 2020-09-11
        url: https://www.drupalcampatlanta.com/2020/sessions/taking-flight-tailwind-css
        online: true
    -
        name: Drupal Yorkshire
        location: Leeds, UK
        date: 2020-08-20
        url: https://www.meetup.com/DrupalYorkshire/events/zwzsfpybclbbc
        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: CMS Philly
        location: Philadelphia, USA
        date: 2020-05-01
        url: https://cmsphilly.org
        online: true
    -
        name: Blue Conf 2019
        location: Cardiff, UK
        date: 2019-06-07
        url: https://blueconf.co.uk
    -
        name: WordCamp Bristol 2019
        location: Bristol, UK
        date: 2019-05-18
        url: https://2019.bristol.wordcamp.org
    -
        name: Cheltenham WordPress Meetup
        location: Cheltenham, UK
        date: 2019-04-17
        url: https://www.meetup.com/Cheltenham-WordPress-Meetup
    -
        name: PHP South Wales
        location: Cardiff, UK
        date: 2018-07-31
        url: https://www.phpsouthwales.uk
    -
        name: Drupal Bristol
        location: Bristol, UK
        date: 2018-01-17
        url: https://www.drupalbristol.org.uk
meta:
    og:
        title: Taking Flight with Tailwind CSS
        description: An introduction to utility CSS and Tailwind.
        type: website
        image:
            url: '%site.assets.url%/assets/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 CSS.
- How to add Tailwind CSS to your project and configure and customise it.
- How to avoid duplication by moving repeating classes into re-usable components for better maintainability.
- How to extend Tailwind CSS and add extra classes with community-written plugins.
- How to write and test your own custom project-specific plugins.

[1]: https://tailwindcss.com