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:03:46 +00:00 · 2020-12-26 22:03:46 +00:00 · cb79277374
parent cdb0e67eb3
commit cb79277374
8 changed files with 2030 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,5 @@
+/node_modules/
+/public/build/

 ###> symfony/framework-bundle ###
 /.env.local
--- a/README.rst
+++ b/README.rst
@ -9,3 +9,14 @@ Run the following command to start a local web server. Going to that URL in your
 .. 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.
--- a/assets/css/tailwind.pcss
+++ b/assets/css/tailwind.pcss
@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/package.json
+++ b/package.json
@ -0,0 +1,19 @@
+{
+  "private": true,
+  "config": {
+    "inputFile": "assets/css/tailwind.pcss",
+    "outputFile": "public/build/tailwind.css"
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development postcss $npm_package_config_inputFile -o $npm_package_config_outputFile",
+    "prod": "cross-env NODE_ENV=production postcss $npm_package_config_inputFile -o $npm_package_config_outputFile",
+    "watch": "cross-env NODE_ENV=development postcss $npm_package_config_inputFile -o $npm_package_config_outputFile --watch"
+  },
+  "dependencies": {
+    "cross-env": "^7.0.3",
+    "cssnano": "^4.1.10",
+    "postcss": "^8.2.1",
+    "postcss-cli": "^8.3.1",
+    "tailwindcss": "^2.0.2"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,8 @@
+module.exports = {
+    plugins: [
+        require('tailwindcss'),
+        ...process.env.NODE_ENV === 'production'
+            ? [require('cssnano')]
+            : []
+    ]
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,13 @@
+module.exports = {
+  purge: {
+    content: ['templates/**/*.twig']
+  },
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}
--- a/templates/html.html.twig
+++ b/templates/html.html.twig
@ -3,6 +3,7 @@
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Florida DrupalCamp{% endblock %}</title>
+        <link rel="stylesheet" href="/build/tailwind.css"/>
        {% block stylesheets %}{% endblock %}
    </head>
    <body>
--- a/yarn.lock
+++ b/yarn.lock