Update Tailwind CSS talk for DrupalCamp Ghent
This commit is contained in:
parent
ad467a8700
commit
cb4b396577
6
src/taking-flight-with-tailwind-css/1.txt
Normal file
6
src/taking-flight-with-tailwind-css/1.txt
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
color: #020617; /* Dark grey */
|
||||
padding: .5rem 0 2rem;
|
||||
}
|
||||
16
src/taking-flight-with-tailwind-css/2.txt
Normal file
16
src/taking-flight-with-tailwind-css/2.txt
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
color: #020617; /* Dark grey */
|
||||
padding: .5rem 0 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
color: #020617; /* Dark grey */
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
15
src/taking-flight-with-tailwind-css/3.txt
Normal file
15
src/taking-flight-with-tailwind-css/3.txt
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
.font-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.text-slate-900 {
|
||||
color: #020617;
|
||||
}
|
||||
|
||||
.text-5xl {
|
||||
text-size: 3rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
8
src/taking-flight-with-tailwind-css/code/20-loops-2.txt
Normal file
8
src/taking-flight-with-tailwind-css/code/20-loops-2.txt
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{navItems.map(item => (
|
||||
<a
|
||||
class="block py-3 px-4 text-sm text-gray-800"
|
||||
href={item.url}
|
||||
>
|
||||
{item.title}
|
||||
</a>
|
||||
))}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
// tailwind.config.js
|
||||
|
||||
module.exports = {
|
||||
mode: "jit",
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
content: ['./templates/**/*.twig'],
|
||||
// ...
|
||||
}
|
||||
|
|
|
|||
BIN
src/taking-flight-with-tailwind-css/images/drupal-gitlab.png
Normal file
BIN
src/taking-flight-with-tailwind-css/images/drupal-gitlab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 250 KiB |
BIN
src/taking-flight-with-tailwind-css/images/drupal-org.png
Normal file
BIN
src/taking-flight-with-tailwind-css/images/drupal-org.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 319 KiB |
BIN
src/taking-flight-with-tailwind-css/images/drupal-starterkit.png
Normal file
BIN
src/taking-flight-with-tailwind-css/images/drupal-starterkit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 244 KiB |
BIN
src/taking-flight-with-tailwind-css/images/drupal-theme.png
Normal file
BIN
src/taking-flight-with-tailwind-css/images/drupal-theme.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 110 KiB |
|
|
@ -9,29 +9,196 @@ Taking Flight with Tailwind CSS
|
|||
|
||||
Oliver Davies (@opdavies)
|
||||
|
||||
|
|
||||
|
||||
.. class:: centred
|
||||
|
||||
https://opdavi.es/dcg
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "I'll be talking about utility class styling and Tailwind CSS, which is a CSS framework that I've been using and I was an early adopter of."
|
||||
TextAnnotation ""
|
||||
TextAnnotation "I'm always updating the talk every time I give it as things change in the framework and ecosystem."
|
||||
TextAnnotation "Something I've used in Drupal, Symfony, Sculpin, Vue.js, Astro, and others."
|
||||
PageBreak standardPage
|
||||
|
||||
.. Switch to an image page.
|
||||
.. raw:: pdf
|
||||
What is utility-first CSS?
|
||||
==========================
|
||||
|
||||
PageBreak imagePage
|
||||
|
||||
.. image:: images/techs.png
|
||||
:width: 16cm
|
||||
* A different way to write CSS.
|
||||
* Instead of writing CSS in separate files, you work primarily in HTML.
|
||||
* Small CSS classes with a single responsibility.
|
||||
* Classes are named by what they do, not where they are used.
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "I'm a Full Stack Software Developer. I work primarily with PHP and JavaScript, and specifically Drupal, Symfony and Vue.js."
|
||||
TextAnnotation "I can use Tailwind CSS on all of these projects."
|
||||
TextAnnotation "The opposite way to how you're taught to write CSS."
|
||||
|
||||
.. Switch to a title page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak titlePage
|
||||
PageBreak titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
The traditional CSS approach
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak standardPage
|
||||
|
||||
.. code-block:: css
|
||||
:include: 1.txt
|
||||
:linenos:
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. code-block:: css
|
||||
:include: 2.txt
|
||||
:linenos:
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "Already starting to see duplication"
|
||||
PageBreak
|
||||
|
||||
.. code-block:: css
|
||||
:include: 2.txt
|
||||
:linenos:
|
||||
:hl_lines: 2,14
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. code-block:: css
|
||||
:include: 2.txt
|
||||
:linenos:
|
||||
:hl_lines: 3,15
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. code-block:: css
|
||||
:include: 2.txt
|
||||
:linenos:
|
||||
:hl_lines: 4,13
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. code-block:: css
|
||||
:include: 2.txt
|
||||
:linenos:
|
||||
:hl_lines: 5,9
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
The utility-first CSS approach
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak standardPage
|
||||
|
||||
.. code-block:: css
|
||||
:include: 3.txt
|
||||
:linenos:
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. code-block:: css
|
||||
:include: 3.txt
|
||||
:linenos:
|
||||
:hl_lines: 1,2,3
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. code-block:: css
|
||||
:include: 3.txt
|
||||
:linenos:
|
||||
:hl_lines: 5,6,7
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. code-block:: css
|
||||
:include: 3.txt
|
||||
:linenos:
|
||||
:hl_lines: 9,10,11
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. code-block:: css
|
||||
:include: 3.txt
|
||||
:linenos:
|
||||
:hl_lines: 13,14,15
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
What problems does this solve?
|
||||
==============================
|
||||
|
||||
- You don't waste time and energy inventing class names.
|
||||
- No switching between CSS and HTML files.
|
||||
- Your CSS stops growing.
|
||||
- Reusability.
|
||||
- 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 ""
|
||||
TextAnnotation "You can re-use components like a news card on events page as the classes aren't coupled to a specific component."
|
||||
TextAnnotation ""
|
||||
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."
|
||||
|
||||
PageBreak titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Examples
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak imagePage
|
||||
|
||||
.. image:: images/screenshot-laravel-nova.png
|
||||
:width: 23cm
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. image:: images/screenshot-send-firefox.png
|
||||
:width: 23cm
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. image:: images/screenshot-rebuilding-bartik.png
|
||||
:width: 23cm
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
|
|
@ -43,23 +210,6 @@ What is Tailwind CSS?
|
|||
|
||||
.. class:: centredtitle
|
||||
|
||||
A utility-first CSS framework for rapidly building custom designs
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "CSS utility class generator."
|
||||
TextAnnotation ""
|
||||
TextAnnotation "PostCSS plugin."
|
||||
TextAnnotation ""
|
||||
TextAnnotation "Make different looking sites using the same class names."
|
||||
TextAnnotation "No 'Tailwind looking site' like there is with Bootstrap."
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Tailwind CSS is a highly customisable, low-level CSS framework
|
||||
|
||||
.. raw:: pdf
|
||||
|
|
@ -72,11 +222,11 @@ Tailwind CSS is a highly customisable, low-level CSS framework
|
|||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
PageBreak
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Tailwind is more than a CSS framework, it's an engine for creating design systems
|
||||
CSS utility class generator
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
|
|
@ -84,11 +234,7 @@ Tailwind is more than a CSS framework, it's an engine for creating design system
|
|||
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."
|
||||
|
||||
.. Switch to a standard page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak standardPage
|
||||
PageBreak standardPage
|
||||
|
||||
- Text/border/background colours
|
||||
- Font size/family/weight
|
||||
|
|
@ -103,10 +249,7 @@ Tailwind is more than a CSS framework, it's an engine for creating design system
|
|||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "Some of the 'original' things that Tailwind would generate classes for."
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
PageBreak
|
||||
|
||||
- Screenreader visibility
|
||||
- Placeholder colour
|
||||
|
|
@ -120,8 +263,8 @@ Tailwind is more than a CSS framework, it's an engine for creating design system
|
|||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak titlePage
|
||||
TextAnnotation "All generated from a single, customisable configuration file."
|
||||
PageBreak titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
|
|
@ -163,137 +306,8 @@ text-blue-500``
|
|||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak imagePage
|
||||
TextAnnotation "Arguments for text colour and shade."
|
||||
|
||||
.. image:: images/screenshot-laravel-nova.png
|
||||
:width: 23cm
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. image:: images/screenshot-send-firefox.png
|
||||
:width: 23cm
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. image:: images/screenshot-rebuilding-bartik.png
|
||||
:width: 23cm
|
||||
|
||||
.. Switch to a title page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
How to use Tailwind
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Style elements by applying pre-existing classes directly in your HTML
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
TextAnnotation "Instead of switching back and forth between HTML and CSS files, styling is done within the HTML markup by applying existing classes."
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Using utility classes to build custom designs without writing CSS
|
||||
|
||||
.. Switch to a standard page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak standardPage
|
||||
|
||||
Benefits
|
||||
========
|
||||
|
||||
- You don't waste time and energy inventing class names.
|
||||
- No switching between CSS and HTML files.
|
||||
- Your CSS stops growing.
|
||||
- Reusability.
|
||||
- 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 ""
|
||||
TextAnnotation "You can re-use components like a news card on events page as the classes aren't coupled to a specific component."
|
||||
TextAnnotation ""
|
||||
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."
|
||||
|
||||
.. Switch to an image page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak imagePage
|
||||
|
||||
.. image:: images/example/0.png
|
||||
:width: 18cm
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. image:: images/example/1.png
|
||||
:width: 18cm
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. image:: images/example/2.png
|
||||
:width: 18cm
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. image:: images/example/3.png
|
||||
:width: 18cm
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. image:: images/example/4.png
|
||||
:width: 18cm
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. image:: images/example/5.png
|
||||
:width: 18cm
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. image:: images/example/6.png
|
||||
:width: 18cm
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. image:: images/example/7.png
|
||||
:width: 18cm
|
||||
|
||||
.. Switch to a title page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak titlePage
|
||||
|
|
@ -304,7 +318,7 @@ Installation and Usage
|
|||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
PageBreak
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
|
|
@ -331,7 +345,6 @@ tailwindcss``
|
|||
|
||||
TextAnnotation "tailwind.config.js is optional, and an input file is optional."
|
||||
|
||||
.. Switch to a title page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak titlePage
|
||||
|
|
@ -379,7 +392,6 @@ first-child, last-child``
|
|||
|
||||
``focus:text-red-500``
|
||||
|
||||
.. Switch to a standard page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak standardPage
|
||||
|
|
@ -391,6 +403,30 @@ Interaction states in CSS
|
|||
:include: code/9-hover-classes.txt
|
||||
:linenos:
|
||||
|
||||
Interaction states in CSS
|
||||
=========================
|
||||
|
||||
.. code-block:: css
|
||||
:include: code/9-hover-classes.txt
|
||||
:linenos:
|
||||
:hl_lines: 1,2,3
|
||||
|
||||
Interaction states in CSS
|
||||
=========================
|
||||
|
||||
.. code-block:: css
|
||||
:include: code/9-hover-classes.txt
|
||||
:linenos:
|
||||
:hl_lines: 5,6,7
|
||||
|
||||
Interaction states in CSS
|
||||
=========================
|
||||
|
||||
.. code-block:: css
|
||||
:include: code/9-hover-classes.txt
|
||||
:linenos:
|
||||
:hl_lines: 9,10,11
|
||||
|
||||
Interaction states in HTML
|
||||
==========================
|
||||
|
||||
|
|
@ -398,7 +434,14 @@ Interaction states in HTML
|
|||
:include: code/10-hover-class-example.txt
|
||||
:linenos:
|
||||
|
||||
.. Switch to a title page.
|
||||
Interaction states in HTML
|
||||
==========================
|
||||
|
||||
.. code-block:: html
|
||||
:include: code/10-hover-class-example.txt
|
||||
:linenos:
|
||||
:hl_lines: 3
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak titlePage
|
||||
|
|
@ -419,7 +462,6 @@ Responsive
|
|||
|
||||
``[screen][separator][class]``
|
||||
|
||||
.. Switch to a standard page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak standardPage
|
||||
|
|
@ -431,7 +473,6 @@ Screens (aka breakpoints)
|
|||
:linenos:
|
||||
:include: code/12-default-screens.txt
|
||||
|
||||
.. Switch to a title page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak titlePage
|
||||
|
|
@ -446,7 +487,6 @@ Screens (aka breakpoints)
|
|||
|
||||
``md:hover:bg-red-500``
|
||||
|
||||
.. Switch to a standard page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak standardPage
|
||||
|
|
@ -458,6 +498,22 @@ Responsive classes in CSS
|
|||
:linenos:
|
||||
:include: code/13-responsive-classes.txt
|
||||
|
||||
Responsive classes in CSS
|
||||
=========================
|
||||
|
||||
.. code-block:: css
|
||||
:linenos:
|
||||
:include: code/13-responsive-classes.txt
|
||||
:hl_lines: 1,2,3
|
||||
|
||||
Responsive classes in CSS
|
||||
=========================
|
||||
|
||||
.. code-block:: css
|
||||
:linenos:
|
||||
:include: code/13-responsive-classes.txt
|
||||
:hl_lines: 5,6,7,8,9
|
||||
|
||||
Responsive classes in HTML
|
||||
==========================
|
||||
|
||||
|
|
@ -465,7 +521,22 @@ Responsive classes in HTML
|
|||
:linenos:
|
||||
:include: code/14-responsive-class-example.txt
|
||||
|
||||
.. Switch to a title page.
|
||||
Responsive classes in HTML
|
||||
==========================
|
||||
|
||||
.. code-block:: html
|
||||
:linenos:
|
||||
:include: code/14-responsive-class-example.txt
|
||||
:hl_lines: 1
|
||||
|
||||
Responsive classes in HTML
|
||||
==========================
|
||||
|
||||
.. code-block:: html
|
||||
:linenos:
|
||||
:include: code/14-responsive-class-example.txt
|
||||
:hl_lines: 2,6
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak titlePage
|
||||
|
|
@ -500,7 +571,6 @@ Arbitrary values
|
|||
``lg:[&:nth-child(3)]:hover
|
||||
:underline``
|
||||
|
||||
.. Switch to a title page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak titlePage
|
||||
|
|
@ -517,7 +587,6 @@ How I deal with repetition?
|
|||
|
||||
Avoid repetition by extracting components
|
||||
|
||||
.. Switch to a standard page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak standardPage
|
||||
|
|
@ -532,17 +601,41 @@ Loops
|
|||
Loops
|
||||
=====
|
||||
|
||||
.. code-block:: twig
|
||||
:linenos:
|
||||
:include: code/20-loops.txt
|
||||
:hl_lines: 1,8
|
||||
|
||||
Loops
|
||||
=====
|
||||
|
||||
.. code-block:: twig
|
||||
:linenos:
|
||||
:include: code/20-loops.txt
|
||||
:hl_lines: 2,3,4,5,6,7
|
||||
|
||||
Loops
|
||||
=====
|
||||
|
||||
.. code-block:: html
|
||||
:linenos:
|
||||
:include: code/20-loops-2.txt
|
||||
|
||||
{navItems.map(item => (
|
||||
<a
|
||||
class="block py-3 px-4 text-sm text-gray-800"
|
||||
href={item.url}
|
||||
>
|
||||
{item.title}
|
||||
</a>
|
||||
))}
|
||||
Loops
|
||||
=====
|
||||
|
||||
.. code-block:: html
|
||||
:linenos:
|
||||
:include: code/20-loops-2.txt
|
||||
:hl_lines: 1,8
|
||||
|
||||
Loops
|
||||
=====
|
||||
|
||||
.. code-block:: html
|
||||
:linenos:
|
||||
:include: code/20-loops-2.txt
|
||||
:hl_lines: 2,3,4,6,7
|
||||
|
||||
Includes
|
||||
========
|
||||
|
|
@ -569,21 +662,6 @@ Includes
|
|||
|
||||
<ClassList classes={classes} type="adults" />
|
||||
|
||||
Extracting CSS components
|
||||
=========================
|
||||
|
||||
.. code-block:: css
|
||||
:linenos:
|
||||
:include: code/css-apply-before.txt
|
||||
|
||||
Extracting CSS components
|
||||
=========================
|
||||
|
||||
.. code-block:: css
|
||||
:linenos:
|
||||
:include: code/css-apply-after.txt
|
||||
|
||||
.. Switch to a title page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak titlePage
|
||||
|
|
@ -604,7 +682,6 @@ Just in Time (JIT mode)
|
|||
|
||||
TextAnnotation "Since the JIT mode was added and changed to be the default option, Tailwind only generates the classes that it needs to - i.e. only the classes in your HTML."
|
||||
|
||||
.. Switch to a title page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak standardPage
|
||||
|
|
@ -625,7 +702,6 @@ Tell Tailwind where it should look for utility classes.
|
|||
|
||||
TextAnnotation "Tailwind will scan the files within the content array and "
|
||||
|
||||
.. Switch to a title page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak titlePage
|
||||
|
|
@ -642,7 +718,6 @@ Customising Tailwind
|
|||
|
||||
``npx tailwind init``
|
||||
|
||||
.. Switch to a standard page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak standardPage
|
||||
|
|
@ -678,7 +753,6 @@ Extending configuration
|
|||
|
||||
TextAnnotation "Extends Tailwind's default colours."
|
||||
|
||||
.. Switch to a title page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak titlePage
|
||||
|
|
@ -695,7 +769,6 @@ Extending configuration
|
|||
|
||||
Adding Tailwind to your CSS
|
||||
|
||||
.. Switch to a standard page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak standardPage
|
||||
|
|
@ -714,6 +787,30 @@ Adding your own classes
|
|||
:linenos:
|
||||
:include: code/2-adding-custom-classes.txt
|
||||
|
||||
Adding your own classes
|
||||
=======================
|
||||
|
||||
.. code-block:: css
|
||||
:linenos:
|
||||
:include: code/2-adding-custom-classes.txt
|
||||
:hl_lines: 3,4
|
||||
|
||||
Adding your own classes
|
||||
=======================
|
||||
|
||||
.. code-block:: css
|
||||
:linenos:
|
||||
:include: code/2-adding-custom-classes.txt
|
||||
:hl_lines: 6,7
|
||||
|
||||
Adding your own classes
|
||||
=======================
|
||||
|
||||
.. code-block:: css
|
||||
:linenos:
|
||||
:include: code/2-adding-custom-classes.txt
|
||||
:hl_lines: 9,10
|
||||
|
||||
Adding your own classes (with layers)
|
||||
=====================================
|
||||
|
||||
|
|
@ -725,7 +822,22 @@ Adding your own classes (with layers)
|
|||
|
||||
TextAnnotation "Automatically places your code in the right position."
|
||||
|
||||
.. Switch to a title page.
|
||||
Adding your own classes (with layers)
|
||||
=====================================
|
||||
|
||||
.. code-block:: css
|
||||
:linenos:
|
||||
:include: code/3-layers.txt
|
||||
:hl_lines: 3,4,5
|
||||
|
||||
Adding your own classes (with layers)
|
||||
=====================================
|
||||
|
||||
.. code-block:: css
|
||||
:linenos:
|
||||
:include: code/3-layers.txt
|
||||
:hl_lines: 7,8,9
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak titlePage
|
||||
|
|
@ -757,7 +869,6 @@ Extending Tailwind CSS with Plugins
|
|||
``npm install --save-dev
|
||||
tailwindcss-list-reset``
|
||||
|
||||
.. Switch to a standard page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak standardPage
|
||||
|
|
@ -766,9 +877,16 @@ Adding a plugin
|
|||
===============
|
||||
|
||||
.. code-block:: javascript
|
||||
:include: code/plugins-add-plugin.txt
|
||||
:linenos:
|
||||
|
||||
Adding a plugin
|
||||
===============
|
||||
|
||||
.. code-block:: javascript
|
||||
:include: code/plugins-add-plugin.txt
|
||||
:linenos:
|
||||
:hl_lines: 7 8 9
|
||||
:include: code/plugins-add-plugin.txt
|
||||
|
||||
Generated CSS
|
||||
=============
|
||||
|
|
@ -845,40 +963,6 @@ Adding a `hocus` variant:
|
|||
addVariant('hocus', ['&:hover', '&:focus']);
|
||||
});
|
||||
|
||||
Writing plugins
|
||||
===============
|
||||
|
||||
Creating a button component:
|
||||
|
||||
|
|
||||
|
||||
.. code-block:: javascript
|
||||
:linenos:
|
||||
:include: code/writing-plugin-2.js
|
||||
:start-after: // Start create plugin
|
||||
:end-before: // End create plugin
|
||||
|
||||
Writing plugins
|
||||
===============
|
||||
|
||||
.. code-block:: javascript
|
||||
:linenos:
|
||||
:hl_lines: 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
|
||||
:include: code/writing-plugin-2.js
|
||||
:start-after: // Start define styles
|
||||
:end-before: // End define styles
|
||||
|
||||
Writing plugins
|
||||
===============
|
||||
|
||||
.. code-block:: javascript
|
||||
:linenos:
|
||||
:hl_lines: 6 7 8 9 10 11
|
||||
:include: code/writing-plugin-2.js
|
||||
:start-after: // Start add components
|
||||
:end-before: // End add components
|
||||
|
||||
.. Switch to a title page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak titlePage
|
||||
|
|
@ -887,7 +971,6 @@ Writing plugins
|
|||
|
||||
Adding Tailwind CSS to an existing project
|
||||
|
||||
.. Switch to a standard page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak standardPage
|
||||
|
|
@ -977,24 +1060,67 @@ Turn classes like ``flex`` into ``tw-flex``.
|
|||
|
||||
``!flex``
|
||||
|
||||
.. Switch to an image page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak imagePage
|
||||
PageBreak titlePage
|
||||
|
||||
.. image:: images/paul-hennell-tweet.png
|
||||
:width: 18cm
|
||||
.. class:: centredtitle
|
||||
|
||||
Tailwind CSS in Drupal
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak imagePage
|
||||
|
||||
.. image:: images/drupal-org.png
|
||||
:width: 22cm
|
||||
|
||||
.. image:: images/drupal-gitlab.png
|
||||
:width: 22cm
|
||||
|
||||
.. Switch to a title page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak titlePage
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
Demo
|
||||
``composer require
|
||||
drupal/tailwindcss:^5``
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. class:: centredtitle
|
||||
|
||||
``php web/core/scripts/drupal
|
||||
generate-theme my_theme
|
||||
--starterkit tailwindcss``
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak imagePage
|
||||
|
||||
.. image:: images/drupal-starterkit.png
|
||||
:width: 22cm
|
||||
|
||||
.. image:: images/drupal-theme.png
|
||||
:width: 22cm
|
||||
|
||||
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak
|
||||
|
||||
.. image:: images/paul-hennell-tweet-1.png
|
||||
:width: 22cm
|
||||
|
||||
.. image:: images/paul-hennell-tweet-2.png
|
||||
:width: 22cm
|
||||
|
||||
.. image:: images/paul-hennell-tweet-3.png
|
||||
:width: 22cm
|
||||
|
||||
.. Switch to a standard page.
|
||||
.. raw:: pdf
|
||||
|
||||
PageBreak standardPage
|
||||
Loading…
Reference in a new issue