example of using TailwindCSS (with purging)

[thescientist13]

Overview

Per https://github.com/ProjectEvergreen/greenwood/discussions/523 wanted to get an example of TailwindCSS working with Greenwood. The intent isn't to merge this PR, but rather provide an example and demonstration for how to add it to a Greenwood project.

Steps

For the most part, I only had to follow the installation steps in the TailwindCSS docs, including the additional configuration needed for production builds and optimizations.

1. Installed Tailwind and related deps

   $ npm install -D tailwindcss autoprefixer

2. Create and configure a postcss.config.js and matching ESM version as postcss.config.mjs and pull in Tailwind and Autoprefixer dependencies

   // CJS
   module.exports = {
     plugins: [
       require('tailwindcss'),
       require('autoprefixer')
     ]
   };
   
   // ESM
   export default {
     plugins: [
       (await import('tailwindcss')).default,
       (await import('autoprefixer')).default
     ]
   };

3. Then run Tailwind's init command

   $ npx tailwindcss init

4. As Greenwood is based on ESM, rename tailwind.config.js to tailwind.config.cjs
5. Configure purge rules

   module.exports = {
     content: [
       './src/**/*.html',
       './src/**/*.js'
    ],
    .

6. Also need to install Greenwood's PostCSS plugin

   $ npm install -D @greenwood/plugin-postcss

7. Updated greenwood.config.js accordingly to include the Greenwood PostCSS plugin
8. Set NODE_ENV=production in any of your build / serve related Greenwood commands to ensure automatic purging by Tailwind (if using Windows, use set or even better, the cross-env package)

   "build": "NODE_ENV=production greenwood build",

9. If you using Stylelint, you may need to override at-rule-no-unknown in your Stylelint config

   'at-rule-no-unknown': [true, { ignoreAtRules: ['tailwind'] }]

Usage

Now with all that setup, in src/styles/theme.css you can now add Tailwind CSS directives

@tailwind base;
@tailwind components;
@tailwind utilities;

.
.

Now you can run Greenwood! 💯 🙌

Develop

Serve (w/ purging)

NEEDS: https://github.com/ProjectEvergreen/greenwood/issues/835
NEEDS: https://github.com/ProjectEvergreen/greenwood/issues/833