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

Updates before the Bristol Software meetup

Browse source
This commit is contained in:
Oliver Davies 2023-02-16 11:39:19 +00:00
parent e392af7acf
commit 7dd48f3880
29 changed files with 1594 additions and 398 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,44 @@
.. 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 Normal file
View file

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

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

@ -33,12 +33,14 @@ Loops
=====
.. code-block:: twig
:linenos:
:include: code/20-loops.txt
Includes
========
.. code-block:: twig
:linenos:
:include: code/21-includes.txt
.. raw:: pdf
@ -49,10 +51,12 @@ 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

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

@ -16,14 +16,17 @@ tailwind.config.js
==================
.. code-block:: javascript
:include: code/tailwind-basic-config.txt
:include: code/tailwind-basic-config.txt
:linenos:
Overriding configuration
========================
.. code-block:: javascript
:include: code/override-colours.txt
:hl_lines: 5 6 7
:include: code/override-colours.txt
:linenos:
:hl_lines: 5 6 7
.. raw:: pdf
@ -33,22 +36,20 @@ Extending configuration
=======================
.. code-block:: javascript
:include: code/extending-colours.txt
:hl_lines: 5 6 7 8 9
:linenos:
:include: code/extending-colours.txt
:hl_lines: 5 6 7 8 9
.. raw:: pdf
TextAnnotation "Extends Tailwind's default colours."
Additional options
==================
.. code-block:: javascript
:include: code/additional-config-options.txt
:hl_lines: 2 3 4
.. page:: titlePage
.. class:: centredtitle
``npx tailwind init --full``
.. raw:: pdf
PageBreak titlePage

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

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

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

@ -2,77 +2,32 @@
.. class:: centredtitle
Keeping Things Small: Controlling the File size
Keeping Things Small: Controlling the file size
.. page:: titlePage
.. class:: centredtitle
Disabling unused variants and core plugins
.. page:: standardPage
Default variants
================
.. code-block:: javascript
:include: code/15-variants-before.txt
Updated variants
================
.. code-block:: diff
:include: code/16-variants-after.txt
.. page:: titlePage
.. class:: centredtitle
Manually removing unused or unwanted classes
.. page:: standardPage
.. code-block:: javascript
:include: code/17-config-before.txt
.. page::
.. code-block:: diff
:include: code/18-config-after.txt
Just in Time (JIT mode)
.. raw:: pdf
TextAnnotation "Needs to be done manually"
.. page:: titlePage
.. class:: centredtitle
Automatically removing unused classes
.. page::
.. class:: centredtitle
Tailwind + PurgeCSS
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
PurgeCSS configuration
======================
Content
=======
Tell Tailwind where it should look for utility classes.
|
.. code-block:: javascript
:include: code/19-purge-config.txt
:linenos:
:include: code/tailwind-config-content.js
.. page:: titlePage
.. raw:: pdf
.. class:: centredtitle
``npx encore dev``
.. page::
.. class:: centredtitle
``NODE_ENV=production
npx encore prod``
TextAnnotation "Tailwind will scan the files within the content array and "

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

@ -2,32 +2,7 @@
.. class:: centredtitle
How do I install Tailwind?
.. page::
.. class:: centredtitle
1\. Use the CDN
.. page:: titlePage
.. class:: centredtitle
To get the most out of Tailwind, you really should install it via npm
.. raw:: pdf
TextAnnotation "You can't customise Tailwind's default theme."
TextAnnotation "You can't use any directives like @apply, @variants, etc.."
TextAnnotation "You can't enable features like group-hover."
TextAnnotation "You can't install third-party plugins."
.. page::
.. class:: centredtitle
2\. Installing Tailwind via NPM
Installation and Usage
.. page::
@ -36,111 +11,20 @@ To get the most out of Tailwind, you really should install it via npm
``npm install --save-dev
tailwindcss``
.. class:: centredtitle
``yarn add -D 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
Adding Tailwind to your CSS
.. page:: standardPage
Including Tailwind
==================
.. code-block:: css
:include: code/1-adding-tailwind-directives.txt
Adding your own classes
=======================
.. code-block:: css
:include: code/2-adding-custom-classes.txt
Adding your own classes (with layers)
=====================================
.. code-block:: css
:include: code/3-layers.txt
``npx tailwind
--content **/*.html
--output build/tailwind.css``
.. raw:: pdf
TextAnnotation "Automatically places your code in the right position."
TextAnnotation "Can be purged if needed."
.. page:: titlePage
.. class:: centredtitle
Processing your CSS with the build command
.. raw:: pdf
TextAnnotation "Compile the generated CSS Pass through PostCSS and Tailwind."
.. page:: titlePage
.. class:: centredtitle
``npx tailwind build
src/css/tailwind.pcss
-o dist/app.css``
.. page:: standardPage
.. code-block:: css
:include: code/4-sample-output.txt
.. raw:: pdf
TextAnnotation "Small, low-level, re-usable utility classes."
.. page:: titlePage
.. class:: centredtitle
Processing your CSS with Webpack Encore
.. page::
.. class:: centredtitle
``npm install --save-dev
@symfony/webpack-encore``
.. page:: standardPage
webpack.config.js
=================
.. code-block:: javascript
:include: code/5-webpack-config.txt
.. raw:: pdf
TextAnnotation "PostCSS - useful if you're including other PostCSS plugins like PostCSS Nested"
postcss.config.js
=================
.. code-block:: javascript
:include: code/6-postcss-config.txt
Running Webpack
===============
.. code-block::
:include: code/7-webpack-output.txt
Adding Tailwind to HTML
=======================
.. code-block:: html
:include: code/8-html.txt
TextAnnotation "tailwind.config.js is optional, and an input file is optional."

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

@ -5,11 +5,15 @@
Interaction states
.. class:: centred
.. raw:: pdf
hover, focus, active, disabled, visited,
group-hover, focus-within,
first-child, last-child...
PageBreak
.. class:: centredtitle
``hover, focus, active, disabled, visited,
focus-within,
first-child, last-child``
.. page::
@ -43,15 +47,11 @@ 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
Default variants
================
.. code-block:: javascript
:include: code/11-default-variants.txt
:linenos:

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

@ -74,9 +74,48 @@ 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."
.. page:: imagePage
.. 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

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

@ -17,16 +17,88 @@ Adding a plugin
===============
.. code-block:: javascript
:linenos:
:include: code/plugins-add-plugin.txt
Generated CSS
=============
.. code-block:: css
:include: code/plugins-generated-css.txt
:linenos:
:include: code/plugins-generated-css.txt
Writing a plugin
================
Writing plugins
===============
.. code-block:: javascript
:include: code/plugins-plugin-source.txt
: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,
})
})

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

@ -20,6 +20,7 @@ Screens (aka breakpoints)
=========================
.. code-block:: javascript
:linenos:
:include: code/12-default-screens.txt
.. page:: titlePage
@ -40,10 +41,12 @@ 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

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

@ -21,9 +21,10 @@ Using utility classes to build custom designs without writing CSS
Benefits
========
- You aren't wasting time and energy inventing class names
- Your CSS stops growing
- Making changes feels safer
- 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