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

Rename directories

Browse source
This commit is contained in:
Oliver Davies 2021-02-06 22:46:22 +00:00
parent a5bee4685a
commit 9f3226aec5
142 changed files with 3 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,154 +0,0 @@
.. page:: titlePage
.. class:: centredtitle
How do I install Tailwind?
.. page::
.. class:: centredtitle
1\. Use the CDN
|
https://unpkg.com/tailwindcss/dist/tailwind.min.css
.. page:: titlePage
.. class:: centredtitle
To get the most out of Tailwind, you really should install it via npm
.. raw:: pdf
TextAnnotation "You can't customize 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
.. page::
.. class:: centredtitle
``npm install --save-dev
tailwindcss``
.. class:: centredtitle
``yarn add -D tailwindcss``
.. raw:: pdf
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
:linenos:
Adding your own classes
=======================
.. code-block:: css
:include: code/2-adding-custom-classes.txt
:linenos:
Adding your own classes (with layers)
=====================================
.. code-block:: css
:include: code/3-layers.txt
:linenos:
.. 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
:linenos:
.. 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