Installation: Front-end Styles

Overview


All I did was pre-configure Laravel's Mix with TailWind CSS.

There is nothing proprietary going on! It's all Laravel, as you see in the Laravel Docs.

Helpful article: gyp: No Xcode or CLT version detected macOS Catalina

Note: I pre-installed tailwindcss/ui.

Note: I use Less.

Installation


Laravel Mix and TailWindCSS are already pre-configured. You do need Node.js and npm set-up first.

At the command line, run:
npm install

To create your js and css for your local environment, at the command line run:
npm run dev

The css file produced will be large. There are lots of styles in your css file that you do not use, because the base TailWindCSS css file contains a lot of styles by design. TailWindCSS now has built-in PurgeCSS support, so you can purge these unused styles from your production css file. PurgeCSS has to know what your styles are, so it knows what is purge-able. So you need to specify the relative paths where your styles reside. This is what I set up as the default paths:

Modify this list as required.

To create your production js and css files, at the command line, run:
npm run prod

Updating


To update your package.json with non-major version updates (per SemVar), at the command line run:
npm update

To update major version updates (eg: from version 1.2.2 to version 2.0.0), run:
npm outdated

Then manually update package.json. Then at the command line run:
npm install