opdavies/florida-drupalcamp-tailwindcss
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity
4 commits 1 branch 0 tags 193 KiB
Twig 82.7%
PHP 15%
JavaScript 2%
CSS 0.3%
Find a file
Oliver Davies cb79277374 Add and configure Tailwind CSS 
Add and configure Tailwind CSS within the project, including adding npm
scripts for compiling the CSS, configuring purge settings, and adding
the `cssnano` library for minifying the CSS (which is run for production
builds).
2020-12-26 22:43:57 +00:00
assets/css Add and configure Tailwind CSS 2020-12-26 22:43:57 +00:00
bin Initial commit 2020-12-26 22:20:18 +00:00
config Initial commit 2020-12-26 22:20:18 +00:00
public Initial commit 2020-12-26 22:20:18 +00:00
src Add the Home page 2020-12-26 22:43:56 +00:00
templates Add and configure Tailwind CSS 2020-12-26 22:43:57 +00:00
.env Initial commit 2020-12-26 22:20:18 +00:00
.gitignore Add and configure Tailwind CSS 2020-12-26 22:43:57 +00:00
composer.json Initial commit 2020-12-26 22:20:18 +00:00
composer.lock Initial commit 2020-12-26 22:20:18 +00:00
package.json Add and configure Tailwind CSS 2020-12-26 22:43:57 +00:00
postcss.config.js Add and configure Tailwind CSS 2020-12-26 22:43:57 +00:00
README.rst Add and configure Tailwind CSS 2020-12-26 22:43:57 +00:00
symfony.lock Initial commit 2020-12-26 22:20:18 +00:00
tailwind.config.js Add and configure Tailwind CSS 2020-12-26 22:43:57 +00:00
yarn.lock Add and configure Tailwind CSS 2020-12-26 22:43:57 +00:00

README.rst 

Florida DrupalCamp Tailwind CSS Workshop
########################################

Local web server
================

Run the following command to start a local web server. Going to that URL in your browser should show you the example page.

.. code::

    php -S 127.0.0.1:8000 -t public

Building the CSS
================

The CSS is generated from ``assets/css/tailwind.pcss`` and is compiled using ``postcss-cli``.

To simplify the process, there are some custom npm scripts added in ``package.json`` that can be used to compile the CSS:

- ``yarn dev`` - generate the development CSS which is un-purged and un-minified.
- ``yarn prod`` - generate the production CSS which is purged and minified.
- ``yarn watch`` - generate the development CSS, but re-generate automatically when the source file is changed.