Fresh Statamic install, with Tailwind CSS and PurgeCSS configured

Statamic+Tailwind+PurgeCSS.md

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, 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": "^5.1.3",
        "laravel-mix": "^2.0.0",
        "tailwindcss": "^1.0.0-beta.8",
        "webpack": "^3.11.0"
    },
    "dependencies": {
        "laravel-mix-purgecss": "^2.2.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/my-theme.css')
      .options({
        postCss: [tailwindcss('./tailwind.config.js')],
        processCssUrls: false,
    })
    .js([
        'js/base.js',
    ], 'js/my-theme.js');

mix.disableSuccessNotifications();

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

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

• 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 ^__^

Hey Adam,

Tried this with a new installation of Statamic except I'm using npm instead of yarn.

getting weird dependencies errors:

* -!../node_modules/css-loader/index.js??ref--5-2!../node_modules/postcss-loader/lib/index.js??postcss!./tailwindcss/base in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./css/base.css
* -!../node_modules/css-loader/index.js??ref--5-2!../node_modules/postcss-loader/lib/index.js??postcss!./tailwindcss/components in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./css/base.css
* -!../node_modules/css-loader/index.js??ref--5-2!../node_modules/postcss-loader/lib/index.js??postcss!./tailwindcss/utilities in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./css/base.css

Do I need to use the @import «tailwindcss/utilities»; instead?

Thanks!

Scratch that!

I WAS using: @import "tailwindcss/base"; instead of @tailwind base;

Changed to the latter and i'm rocking.

Thanks

Can all of this be working with fresh installed Statamic using Laravel Herd?