93 lines
2.1 KiB
ReStructuredText
93 lines
2.1 KiB
ReStructuredText
.. 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 customisable, 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
|