109 lines
2 KiB
ReStructuredText
109 lines
2 KiB
ReStructuredText
.. 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
|