.. page:: titlePage

.. class:: centredtitle

How do I use Tailwind?

.. page::

.. class:: centredtitle

Style elements by applying pre-existing classes directly in your HTML

.. page::

.. class:: centredtitle

Using utility classes to build custom designs without writing CSS

.. page:: standardPage

Benefits
========

- You aren't wasting time and energy inventing class names
- Your CSS stops growing
- Making changes feels safer

.. raw:: pdf

    TextAnnotation "No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that's really just a flex container."
    TextAnnotation "Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS."
    TextAnnotation "CSS is global and you never know what you're breaking when you make a change."
    TextAnnotation "Classes in your HTML are local, so you can change them without worrying about something else breaking."

.. page:: imagePage

.. image:: images/example/0.png
    :width: 18cm

.. page::

.. image:: images/example/1.png
    :width: 18cm

.. page::

.. image:: images/example/2.png
    :width: 18cm

.. page::

.. image:: images/example/3.png
    :width: 18cm

.. page::

.. image:: images/example/4.png
    :width: 18cm

.. page::

.. image:: images/example/5.png
    :width: 18cm

.. page::

.. image:: images/example/6.png
    :width: 18cm

.. page::

.. image:: images/example/7.png
    :width: 18cm

.. page::

.. image:: images/example/8.png
    :width: 18cm

.. page::

.. image:: images/example/9.png
    :width: 18cm

.. page::

.. image:: images/example/10.png
    :width: 18cm

.. page::

.. image:: images/example/11.png
    :width: 18cm

.. page::

.. image:: images/example/12.png
    :width: 18cm

.. page::

.. image:: images/example/13.png
    :width: 18cm

.. page::

.. image:: images/example/14.png
    :width: 18cm