binoclard/Statamic+Tailwind+PurgeCSS.md

## Statamic+Tailwind+PurgeCSS.md

      
    Raw
  

              Statamic+Tailwind+PurgeCSS.md
            
          
    Fresh Statamic install, with Tailwind CSS and PurgeCSS configured

In 5 minutes, you’ll have a brand new clean Statamic site, with Tailwind CSS and PurgeCSS configured.
It assumes that you work on a Mac, you put your site in ~/sites and you use Laravel Valet.

All the credit go to Jack McDade and philipboomy, from whom I stole and adapt the build scripts and the PurgeCSS config, because I have really absolutely no idea what I am doing with all this Terminal Black Magic ™; this is only a detailed write up of the process.

You'll need Yarn and Node. You can install them both in one command via Brew: brew install yarn


 If not already done, install Statamic CLI Tool


 cd sites


 statamic new my-site


 cd my-site


 php please clear:site --force


 php please make:theme my-theme


 copy this code into site/themes/my-theme/package.json


{
    "private": true,
    "scripts": {
        "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "cross-env": "^7.0.2",
        "laravel-mix": "^5.0.4",
        "tailwindcss": "^1.2.0",
        "webpack": "^4.42.1"
    },
    "dependencies": {
        "laravel-mix-purgecss": "^4.1.0"
    }
}

The first part are build scripts that will allow you to process Tailwind, and the rest are all the required dependencies.

 Create a site/themes/my-theme/webpack.mix.js file, and copy this code in it:

let mix = require('laravel-mix');
let tailwindcss = require('tailwindcss');
require('laravel-mix-purgecss');

mix
  .postCss('css/base.css', 'css/binocle.css')
  .options({
    postCss: [tailwindcss('tailwind.config.js')],
    processCssUrls: false,
  })

  .js(['js/base.js',], 'js/binocle.js');

mix.disableSuccessNotifications();

if (mix.inProduction()) {
    mix.purgeCss({
        enabled: true,
        globs: [
            path.join(__dirname, 'templates/*.html'),
            path.join(__dirname, 'partials/*.html'),
            path.join(__dirname, 'partials/**/*.html'),
            path.join(__dirname, 'layouts/*.html'),
            path.join(__dirname, 'js/**.js'),
            path.join(__dirname, 'img/**.svg'),
        ],
        extensions: ['html', 'js', 'php', 'vue', 'svg'],
        whitelist: ['emphase'],
    })
};

I don’t use sass/less or other fancy css tool, so I keep it simple:


 create a base.css file in the theme css folder, that will eventually be compiled with all the black magic stuff. Same for js.


 same for js: create a base.js file in the theme js folder.


  cd site/themes/my-theme


 yarn


 yarn add tailwindcss --dev


 ./node_modules/.bin/tailwind init tailwind.js


 copy Tailwind stylesheet into base.css


/**
 * This injects Tailwind’s base styles, which is a combination of
 * Normalize.css and some additional base styles.
 *
 * You can see the styles here:
 * https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import «tailwindcss/base»;
 */
@tailwind base;

/**
 * This injects any component classes registered by plugins.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import «tailwindcss/components»;
 */
@tailwind components;

/**
 * Here you would add any of your custom component classes; stuff that you’d
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 *
 * Example:
 *
 * .btn { … }
 * .form-input { … }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import «components/buttons»;
 * @import «components/forms»;
 */

/**
 * This injects all of Tailwind’s utility classes, generated based on your
 * config file.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import «tailwindcss/utilities»;
 */
@tailwind utilities;

/**
 * Here you would add any custom utilities you need that don’t come out of the
 * box with Tailwind.
 *
 * Example :
 *
 * .bg-pattern-graph-paper { … }
 * .skew-45 { … }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import «utilities/background-patterns»;
 * @import «utilities/skew-transforms»;
 */


 you can know run yarn run watch or yarn run production


 Enjoy ^__^