.. page:: titlePage

.. class:: centredtitle

What is Tailwind CSS?

.. page::

.. class:: centredtitle

A utility-first CSS framework for rapidly building custom designs

.. raw:: pdf

    TextAnnotation "CSS utility class generator."
    TextAnnotation "PostCSS plugin."
    TextAnnotation "Make different looking sites using the same class names."
    TextAnnotation "No 'Tailwind looking site' like there is with Bootstrap."

.. page::

.. class:: centredtitle

Tailwind CSS is a highly customizable, low-level CSS framework

.. raw:: pdf

    TextAnnotation "No components like Bootstrap or Bulma."
    TextAnnotation "Configure it per project."
    TextAnnotation "Extendable if needed via additional plugins."
    TextAnnotation "Avoids the need to name things prematurely."
    TextAnnotation "Can extract components if needed (reusability)."

.. page::

.. class:: centredtitle

Tailwind is more than a CSS framework, it's an engine for creating design systems

.. raw:: pdf

    TextAnnotation "Good default values provided - colours, fonts, padding, widths"
    TextAnnotation "Designing with constraints."
    TextAnnotation "Using inline styles, every value is a magic number."
    TextAnnotation "With utilities, you're choosing styles from a predefined design system, which makes it much easier to build visually consistent UIs."

.. page:: standardPage

- Text/border/background colours
- Font size/family/weight
- Alignment
- Padding/margin/negative margin
- Flexbox
- Positioning
- Lists
- z-index
- Opacity

.. raw:: pdf

    TextAnnotation "Some of the 'original' things that Tailwind would generate classes for."

.. page::

- Screenreader visibility
- Placeholder colour
- first-child, last-child, nth-child
- CSS Grid
- Transition
- Transform
- Spacing / Divide
- Focus ring
- Text clamping

.. raw:: pdf

    TextAnnotation "All generated from a single, customisable configuration file."

.. page:: imagePage

.. image:: images/screenshot-laravel-nova.png
    :width: 23cm

.. page::

.. image:: images/screenshot-send-firefox.png
    :width: 23cm

.. page::

.. image:: images/screenshot-rebuilding-bartik.png
    :width: 23cm