Fresh Statamic install, with Tailwind CSS and PurgeCSS configured

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

Awesome! I tested this on a new Statamic 2 with Tailwindcss1.0.4 and it works great with just that one change.

Thank u. It works good. Except of the thing with the @tailwind base;
But when I try to enable sass files - it does not work at all, hmm.
And the next thing is - I try to extend colors. That's also not working.

When I run:

yarn run watch

I get a error:

@apply cannot be used with .text-silver because .text-silver either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .text-silver exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

But I think I did it all right:

What can that be?

Hi @Slowwie,

Yeah, sorry about the @tailwind base, I have not taken the time yet to update for the latest Tailwind stylesheet guidelines.

I don't work with sass, sorry, I cannot help you with that.

Regarding your errors: they are not directly linked to this setup, but rather a Tailwind limitation. You have to specify the pseudo-selector variant for the properties (for example backgroundColor: ['responsive', 'hover', 'focus'],), and I think that should do it.

Hi @binoclard, thanks so much for sharing this! That saved me hundreds of hours :)

• I had to rename tailwind.json to tailwind.config.js to have it up and running. Might be that Tailwind changed this in the meantime or that it wasn't generated as it should.
• and it took me a couple of minutes to figure out that the names of the .js and .css of course have to match the theme name to have it injected properly via Statamic's {{ theme:css }} and {{ theme:js }}.

Happy coding!