Jigsaw : toevoegen van Tailwindcss

Opzetten van Jigsaw

referentie Jigsaw site

1. directory aanmaken
2. composer require tightenco/jigsaw
3. ./vendor/bin/jigsaw init
4. assets klaarmaken (zie hieronder)
5. ./vendor/bin/jigsaw build

Installeren van Tailwindcss

npm install tailwindcss laravel-mix-purgecss postcss-import --save-dev

vervolgens :
tailwind.config.js file aanmaken in root van webdirectory, kan bvb. met

npx tailwindcss init

source_assets\css\main.css file aanmaken met basis tailwind logica

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

webpack.mix.js aanpassen :

let mix = require('laravel-mix');
let tailwind = require('tailwindcss');
let build = require('./tasks/build.js');
require('laravel-mix-purgecss');

mix.disableSuccessNotifications();
mix.setPublicPath('source/assets/build');
mix.webpackConfig({
    plugins: [
        build.jigsaw,
        build.browserSync(),
        build.watch(['source/**/*.md', 'source/**/*.php', 'source/**/*.scss', '!source/**/_tmp/*']),
    ]
});

mix.options({
    processCssUrls: false,
    postCss: [
        require('postcss-import'),
        tailwind('tailwind.config.js'),
    ]
})
    .postCss('source/_assets/sass/main.css', 'css/main.css')
    .js('source/_assets/js/main.js', 'js')
    .purgeCss({
        folders: ['source'],
    })
    .version();

npm install

npm run dev