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 watchoryarn run production -
Enjoy ^__^
Thanks :-)
I have new Statamic + Tailwind projects coming this summer, I'll have to familiarize myself with the changes in v1, and I'll update the process.