Add 'Taking Flight with Tailwind CSS' slides

2021-01-19 17:44:55 +00:00 · 2021-01-19 17:44:55 +00:00 · c78138b63d
commit c78138b63d
parent 6cf5e862ad
65 changed files with 1208 additions and 0 deletions
--- a/taking-flight-with-tailwind-css/sections/usage.rst
+++ b/taking-flight-with-tailwind-css/sections/usage.rst
@ -0,0 +1,108 @@
+.. 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