opdavies/talks
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Updates before nor(DEV):con

Browse source
This commit is contained in:
Oliver Davies 2023-02-22 23:26:04 +00:00
parent de6303e55a
commit 639de3a234
17 changed files with 1257 additions and 941 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
taking-flight-with-tailwind-css/code/writing-plugin-1.js Normal file
View file

@ -0,0 +1,24 @@
// Start require plugin
const plugin = require("tailwindcss/plugin");
// End require plugin
// Start add function
const plugin = require("tailwindcss/plugin");
module.exports = plugin(function({ addUtilities }) {
})
// End add function
// Start function contents
const plugin = require("tailwindcss/plugin");
module.exports = plugin(function({ addUtilities }) {
addUtilities({
'.list-reset': {
listStyle: 'none',
padding: 0,
},
})
})
// End function contents

47
taking-flight-with-tailwind-css/code/writing-plugin-2.js Normal file
View file

@ -0,0 +1,47 @@
// Start create plugin
const plugin = require("tailwindcss/plugin");
module.exports = plugin(({ addComponents, theme }) {
});
// End create plugin
// Start define styles
const plugin = require("tailwindcss/plugin");
module.exports = plugin(({ addComponents, theme }) {
let styles = {
primary: {
default: {
backgroundColor: theme("colors.primary.DEFAULT"),
border: `2px solid ${theme("colors.primary.dark")}`,
borderRadius: "10px",
color: theme("colors.white"),
cursor: "pointer",
padding: `${theme("padding.3")} ${theme("padding.12")}`,
},
hover: {
backgroundColor: theme("colors.white"),
color: theme("colors.primary.DEFAULT"),
},
},
}
});
// End define styles
// Start add components
const plugin = require("tailwindcss/plugin");
module.exports = plugin(({ addComponents, theme }) {
// ...
addComponents({
"#edit-checkout.button": styles.primary.default,
"#edit-checkout.button:hover, #edit-checkout.button:focus":
styles.primary.hover,
});
});
// End add components

191
taking-flight-with-tailwind-css/opdavies-dark.style → taking-flight-with-tailwind-css/opdavies-dark.yaml
View file

@ -1,15 +1,23 @@
embeddedFonts: []
["Inconsolata.ttf", "Inconsolata.ttf", "Inconsolata.ttf", "Inconsolata.ttf"]
["Helvetica.ttf", "Helvetica-Bold.ttf", "Helvetica.ttf", "Helvetica-Bold.ttf"]
embeddedFonts:
- - Inconsolata.ttf
- Inconsolata.ttf
- Inconsolata.ttf
- Inconsolata.ttf
- - Helvetica.ttf
- Helvetica-Bold.ttf
- Helvetica.ttf
- Helvetica-Bold.ttf
fontsAlias:
fontFont: Helvetica
fontBold: Helvetica-Bold
fontFont: Helvetica
fontItalic: Helvetica
fontMono: Inconsolata
fontMonoBold: Inconsolata
fontMonoBoldItalic: Inconsolata
fontMonoItalic: Inconsolata
linkColor: '#60a5fa'
pageSetup:
firstTemplate: coverPage
@ -26,99 +34,84 @@ pageSetup:
pageTemplates:
coverPage:
# background: images/title.png
frames: []
[12%, 10%, 76%, 75%]
background: ../images/bg-dark.png
frames:
- - 12%
- 10%
- 76%
- 75%
showFooter: false
showHeader: false
imagePage:
alignment: TA_CENTER
background: ../images/bg-dark.png
frames:
- - 3%
- 3%
- 92%
- 92%
showFooter: true
showHeader: false
outputPage:
background: ../images/bg-dark.png
frames:
- - 8%
- 10%
- 82%
- 65%
showFooter: false
showHeader: false
standardPage:
background: ../images/bg-dark.png
frames:
- - 3%
- 3%
- 92%
- 92%
showFooter: true
showHeader: false
titlePage:
alignment: TA_CENTER
frames: []
[8%, 8%, 85%, 65%]
background: ../images/bg-dark.png
frames:
- - 8%
- 8%
- 85%
- 65%
showFooter: true
showHeader: false
background: ../images/bg-dark.png
standardPage:
frames: []
[3%, 3%, 92%, 92%]
showFooter: true
showHeader: false
background: ../images/bg-dark.png
imagePage:
alignment: TA_CENTER
frames: []
[3%, 3%, 92%, 92%]
showFooter: true
showHeader: false
background: ../images/bg-dark.png
outputPage:
frames: []
[8%, 10%, 82%, 65%]
showFooter: false
showHeader: false
background: ../images/bg-dark.png
linkColor: #60a5fa
styles:
normal:
fontSize: 24
textColor: #ffffff
bodytext:
alignment: TA_LEFT
heading:
fontName: fontBold
fontSize: 20
spaceAfter: 16
textColor: #60a5fa
title:
fontSize: 300%
parent: heading
bullet-list:
commands: []
[LEFTPADDING, [0, 0], [1, -1], 5]
[RIGHTPADDING, [0, 0], [1, -1], 0]
colWidths: ["20", null]
textColor: #ffffff
colWidths:
- '20'
- null
commands:
- - LEFTPADDING
- - 0
- 0
- - 1
- -1
- 5
- - RIGHTPADDING
- - 0
- 0
- - 1
- -1
- 0
textColor: '#ffffff'
bullet-list-item:
spaceBefore: 18
spaceAfter: 0
spaceBefore: 18
titleslideinfo:
alignment: TA_CENTER
fontSize: 140%
parent: normal
footer:
alignment: TA_RIGHT
fontName: fontMono
fontSize: 20
textColor: #24608a
rightIndent: 16
spaceBefore: 0
literal:
backColor: #111111
fontName: fontMono
code:
backColor: #111111
borderWidth: 0
fontSize: 24
leading: 26
parent: literal
spaceBefore: 4
centred:
alignment: TA_CENTER
parent: normal
@ -129,3 +122,43 @@ styles:
fontSize: 48
leading: 64
parent: heading
code:
backColor: '#111111'
borderWidth: 0
fontSize: 24
leading: 26
parent: literal
spaceBefore: 4
footer:
alignment: TA_RIGHT
fontName: fontMono
fontSize: 20
rightIndent: 16
spaceBefore: 0
textColor: '#24608a'
heading:
fontName: fontBold
fontSize: 20
spaceAfter: 16
textColor: '#60a5fa'
literal:
backColor: '#111111'
fontName: fontMono
normal:
fontSize: 24
textColor: '#ffffff'
title:
fontSize: 300%
parent: heading
titleslideinfo:
alignment: TA_CENTER
fontSize: 140%
parent: normal

172
taking-flight-with-tailwind-css/opdavies-light.style → taking-flight-with-tailwind-css/opdavies-light.yaml
View file

@ -1,16 +1,24 @@
embeddedFonts: []
["Inconsolata.ttf", "Inconsolata.ttf", "Inconsolata.ttf", "Inconsolata.ttf"]
["Helvetica.ttf", "Helvetica-Bold.ttf", "Helvetica.ttf", "Helvetica-Bold.ttf"]
embeddedFonts:
- - Inconsolata.ttf
- Inconsolata.ttf
- Inconsolata.ttf
- Inconsolata.ttf
- - Helvetica.ttf
- Helvetica-Bold.ttf
- Helvetica.ttf
- Helvetica-Bold.ttf
fontsAlias:
fontFont: Helvetica
fontBold: Helvetica-Bold
fontFont: Helvetica
fontItalic: Helvetica
fontMono: Inconsolata
fontMonoBold: Inconsolata
fontMonoBoldItalic: Inconsolata
fontMonoItalic: Inconsolata
linkColor: '#24608a'
pageSetup:
firstTemplate: coverPage
height: 18cm
@ -26,94 +34,79 @@ pageSetup:
pageTemplates:
coverPage:
# background: images/title.png
frames: []
[12%, 10%, 76%, 75%]
frames:
- - 12%
- 10%
- 76%
- 75%
showFooter: false
showHeader: false
titlePage:
alignment: TA_CENTER
frames: []
[8%, 8%, 85%, 65%]
showFooter: true
showHeader: false
standardPage:
frames: []
[3%, 3%, 92%, 92%]
showFooter: true
showHeader: false
imagePage:
alignment: TA_CENTER
frames: []
[3%, 3%, 92%, 92%]
frames:
- - 3%
- 3%
- 92%
- 92%
showFooter: true
showHeader: false
outputPage:
frames: []
[8%, 10%, 82%, 65%]
frames:
- - 8%
- 10%
- 82%
- 65%
showFooter: false
showHeader: false
linkColor: #24608a
standardPage:
frames:
- - 3%
- 3%
- 92%
- 92%
showFooter: true
showHeader: false
titlePage:
alignment: TA_CENTER
frames:
- - 8%
- 8%
- 85%
- 65%
showFooter: true
showHeader: false
styles:
normal:
fontSize: 24
textColor: #383745
bodytext:
alignment: TA_LEFT
heading:
fontName: fontBold
fontSize: 20
spaceAfter: 16
textColor: #24608a
title:
fontSize: 300%
parent: heading
bullet-list:
commands: []
[LEFTPADDING, [0, 0], [1, -1], 5]
[RIGHTPADDING, [0, 0], [1, -1], 0]
colWidths: ["20", null]
textColor: #aaaaaa
colWidths:
- '20'
- null
commands:
- - LEFTPADDING
- - 0
- 0
- - 1
- -1
- 5
- - RIGHTPADDING
- - 0
- 0
- - 1
- -1
- 0
textColor: '#aaaaaa'
bullet-list-item:
spaceBefore: 18
spaceAfter: 0
spaceBefore: 18
titleslideinfo:
alignment: TA_CENTER
fontSize: 140%
parent: normal
footer:
alignment: TA_RIGHT
fontName: fontMono
fontSize: 20
textColor: #24608a
rightIndent: 16
spaceBefore: 0
literal:
backColor: white
fontName: fontMono
code:
backColor: white
borderWidth: 0
fontSize: 24
leading: 26
parent: literal
spaceBefore: 0
centred:
alignment: TA_CENTER
parent: normal
@ -124,3 +117,42 @@ styles:
fontSize: 48
leading: 64
parent: heading
code:
backColor: white
borderWidth: 0
fontSize: 24
leading: 26
parent: literal
spaceBefore: 0
footer:
alignment: TA_RIGHT
fontName: fontMono
fontSize: 20
rightIndent: 16
spaceBefore: 0
textColor: '#24608a'
heading:
fontName: fontBold
fontSize: 20
spaceAfter: 16
textColor: '#24608a'
literal:
backColor: white
fontName: fontMono
normal:
fontSize: 24
textColor: '#383745'
title:
fontSize: 300%
parent: heading
titleslideinfo:
alignment: TA_CENTER
fontSize: 140%
parent: normal

44
taking-flight-with-tailwind-css/sections/adding-classes.rst
View file

@ -1,44 +0,0 @@
.. class:: centredtitle
Adding Tailwind to your CSS
.. page:: standardPage
Including Tailwind
==================
.. code-block:: css
:linenos:
:include: code/1-adding-tailwind-directives.txt
Adding your own classes
=======================
.. code-block:: css
:linenos:
:include: code/2-adding-custom-classes.txt
Adding your own classes (with layers)
=====================================
.. code-block:: css
:linenos:
:include: code/3-layers.txt
.. raw:: pdf
TextAnnotation "Automatically places your code in the right position."
.. raw:: pdf
PageBreak titlePage
.. class:: centredtitle
``npx tailwind
--input src/css/tailwind.pcss
--output dist/tailwind.css``
.. raw:: pdf
TextAnnotation "As well as the output file, we need to specify the input file."

34
taking-flight-with-tailwind-css/sections/arbitrary-values.rst
View file

@ -1,34 +0,0 @@
.. Switch to a title page.
.. raw:: pdf
PageBreak titlePage
.. class:: centredtitle
Arbitrary values
.. raw:: pdf
PageBreak
.. class:: centredtitle
``w-[23px] md:w-[250px]``
``text-[#abc123]``
.. raw:: pdf
PageBreak
.. class:: centredtitle
``grid-cols-[fit-content(theme(spacing.32))]``
.. raw:: pdf
PageBreak
.. class:: centredtitle
``lg:[&:nth-child(3)]:hover
:underline``

62
taking-flight-with-tailwind-css/sections/components.rst
View file

@ -1,62 +0,0 @@
.. page:: titlePage
.. class:: centredtitle
How I deal with repetition?
.. page::
.. class:: centredtitle
Avoid repetition by extracting components
.. page::
.. class:: centredtitle
Does something justify becoming a component?
.. page::
.. class:: centredtitle
Could the duplication be moved elsewhere?
.. raw:: pdf
TextAnnotation "Twig partials, Vue components, WordPress template parts."
.. page:: standardPage
Loops
=====
.. code-block:: twig
:linenos:
:include: code/20-loops.txt
Includes
========
.. code-block:: twig
:linenos:
:include: code/21-includes.txt
.. raw:: pdf
TextAnnotation "Move the duplicate markup into a partial, so there's only one version. Pass data in."
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

55
taking-flight-with-tailwind-css/sections/customising.rst
View file

@ -1,55 +0,0 @@
.. page:: titlePage
.. class:: centredtitle
Customising Tailwind
.. page::
.. class:: centredtitle
``npx tailwind init``
.. page:: standardPage
tailwind.config.js
==================
.. code-block:: javascript
:include: code/tailwind-basic-config.txt
:linenos:
Overriding configuration
========================
.. code-block:: javascript
:include: code/override-colours.txt
:linenos:
:hl_lines: 5 6 7
.. raw:: pdf
TextAnnotation "Overrides all colours."
Extending configuration
=======================
.. code-block:: javascript
:linenos:
:include: code/extending-colours.txt
:hl_lines: 5 6 7 8 9
.. raw:: pdf
TextAnnotation "Extends Tailwind's default colours."
.. page:: titlePage
.. class:: centredtitle
``npx tailwind init --full``
.. raw:: pdf
PageBreak titlePage

97
taking-flight-with-tailwind-css/sections/existing-project.rst
View file

@ -1,97 +0,0 @@
.. raw:: pdf
PageBreak titlePage
.. class:: centredtitle
Adding Tailwind CSS to an existing project
.. raw:: pdf
PageBreak standardPage
Disabling the reset styles
==========================
.. code-block:: javascript
:linenos:
:hl_lines: 7 8 9
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
corePlugins: {
preflight: false,
},
plugins: [],
}
Prefixing class names
=====================
Turn classes like ``flex`` into ``tw-flex``.
|
.. code-block:: javascript
:linenos:
:hl_lines: 3
/** @type {import('tailwindcss').Config} */
module.exports = {
prefix: "tw-",
content: [],
theme: {
extend: {},
},
plugins: [],
}
!important
==========
.. code-block:: javascript
:linenos:
:hl_lines: 3
/** @type {import('tailwindcss').Config} */
module.exports = {
important: true,
content: [],
theme: {
extend: {},
},
plugins: [],
}
!important
==========
.. code-block:: javascript
:linenos:
:hl_lines: 3
/** @type {import('tailwindcss').Config} */
module.exports = {
important: "#app",
content: [],
theme: {
extend: {},
},
plugins: [],
}
!important
==========
|
|
.. class:: centredtitle
``!flex``

33
taking-flight-with-tailwind-css/sections/file-size.rst
View file

@ -1,33 +0,0 @@
.. page:: titlePage
.. class:: centredtitle
Keeping Things Small: Controlling the file size
.. page:: titlePage
.. class:: centredtitle
Just in Time (JIT mode)
.. raw:: pdf
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."
.. page:: standardPage
Content
=======
Tell Tailwind where it should look for utility classes.
|
.. code-block:: javascript
:linenos:
:include: code/tailwind-config-content.js
.. raw:: pdf
TextAnnotation "Tailwind will scan the files within the content array and "

30
taking-flight-with-tailwind-css/sections/installation.rst
View file

@ -1,30 +0,0 @@
.. page:: titlePage
.. class:: centredtitle
Installation and Usage
.. page::
.. class:: centredtitle
``npm install --save-dev
tailwindcss``
.. raw:: pdf
TextAnnotation "There is a CDN version available that provides everything but you can't customise it."
TextAnnotation "There's also the play.tailwindcss.com website that you can use."
TextAnnotation "Adds it as a dependency to your package.json file"
.. page::
.. class:: centredtitle
``npx tailwind
--content **/*.html
--output build/tailwind.css``
.. raw:: pdf
TextAnnotation "tailwind.config.js is optional, and an input file is optional."

57
taking-flight-with-tailwind-css/sections/interaction-states.rst
View file

@ -1,57 +0,0 @@
.. page:: titlePage
.. class:: centredtitle
Interaction states
.. raw:: pdf
PageBreak
.. class:: centredtitle
``hover, focus, active, disabled, visited,
focus-within,
first-child, last-child``
.. page::
.. class:: centredtitle
``[state][separator][class]``
.. raw:: pdf
TextAnnotation "State = hover, focus, group focus, focus within."
TextAnnotation "Separator = configurable"
TextAnnotation "Colon by default"
TextAnnotation "Class = the same utility class that you would have used normally"
.. page::
.. class:: centredtitle
``hover:text-red-500``
|
.. class:: centredtitle
``focus:text-red-500``
.. page:: standardPage
Interaction states in CSS
=========================
.. code-block:: css
:include: code/9-hover-classes.txt
:linenos:
Interaction states in HTML
==========================
.. code-block:: html
:include: code/10-hover-class-example.txt
:linenos:

131
taking-flight-with-tailwind-css/sections/intro.rst
View file

@ -1,131 +0,0 @@
.. 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
PageBreak titlePage
TextAnnotation "All generated from a single, customisable configuration file."
.. class:: centredtitle
``block
inline
flex
grid``
.. raw:: pdf
PageBreak
TextAnnotation "A class that toggles a single CSS property."
.. class:: centredtitle
``text-sm
text-base
text-lg
text-xl
text-2xl``
.. raw:: pdf
PageBreak
TextAnnotation "T-shirt size arguments."
.. class:: centredtitle
``text-blue-50
text-blue-100
text-blue-200
text-blue-300
text-blue-400
text-blue-500``
.. raw:: pdf
PageBreak imagePage
TextAnnotation "Arguments for text colour and shade."
.. 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

104
taking-flight-with-tailwind-css/sections/plugins.rst
View file

@ -1,104 +0,0 @@
.. page:: titlePage
.. class:: centredtitle
Extending Tailwind CSS with Plugins
.. page::
.. class:: centredtitle
``npm install --save-dev
tailwindcss-list-reset``
.. page:: standardPage
Adding a plugin
===============
.. code-block:: javascript
:linenos:
:include: code/plugins-add-plugin.txt
Generated CSS
=============
.. code-block:: css
:linenos:
:include: code/plugins-generated-css.txt
Writing plugins
===============
.. code-block:: javascript
:linenos:
:include: code/plugins-plugin-source.txt
Writing plugins
===============
Adding `child` and `child-hover` variants:
|
.. code-block:: javascript
:linenos:
const plugin = require('tailwindcss/plugin');
module.exports = plugin(({ addVariant }) => {
addVariant('child', '& > *');
addVariant('child-hover', '& > *:hover');
});
Writing plugins
===============
Adding a `hocus` variant:
|
.. code-block:: javascript
:linenos:
const plugin = require('tailwindcss/plugin');
module.exports = plugin(({ addVariant }) => {
addVariant('hocus', ['&:hover', '&:focus']);
});
Writing plugins
===============
Creating a button component:
|
.. code-block:: javascript
:linenos:
plugin(function ({ addComponents, theme }) {
let styles = {
primary: {
default: {
backgroundColor: theme("colors.primary.DEFAULT"),
border: `2px solid ${theme("colors.primary.dark")}`,
borderRadius: "10px",
color: theme("colors.white"),
cursor: "pointer",
padding: `${theme("padding.3")} ${theme("padding.12")}`,
},
hover: {
backgroundColor: theme("colors.white"),
color: theme("colors.primary.DEFAULT"),
},
},
}
addComponents({
"#edit-checkout.button": styles.primary.default,
"#edit-checkout.button:hover, #edit-checkout.button:focus":
styles.primary.hover,
})
})

52
taking-flight-with-tailwind-css/sections/responsive.rst
View file

@ -1,52 +0,0 @@
.. page:: titlePage
.. class:: centredtitle
Responsive
.. raw:: pdf
TextAnnotation "Mobile first by default"
.. page::
.. class:: centredtitle
``[screen][separator][class]``
.. page:: standardPage
Screens (aka breakpoints)
=========================
.. code-block:: javascript
:linenos:
:include: code/12-default-screens.txt
.. page:: titlePage
.. class:: centredtitle
``md:flex``
|
.. class:: centredtitle
``md:hover:bg-red-500``
.. page:: standardPage
Responsive classes in CSS
=========================
.. code-block:: css
:linenos:
:include: code/13-responsive-classes.txt
Responsive classes in HTML
==========================
.. code-block:: html
:linenos:
:include: code/14-responsive-class-example.txt

74
taking-flight-with-tailwind-css/sections/usage.rst
View file

@ -1,74 +0,0 @@
.. 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

991
taking-flight-with-tailwind-css/taking-flight-with-tailwind-css.rst
View file

File diff suppressed because it is too large Load diff