presentations/taking-flight-with-tailwind-css/sections/usage.rst

.. 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 don't waste time and energy inventing class names.
- No switching between CSS and HTML files.
- Your CSS stops growing.
- Making changes feels (and is) 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