155 lines
2.6 KiB
ReStructuredText
155 lines
2.6 KiB
ReStructuredText
|
.. 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
|