♻️ tailbuild

A simple command to build a JIT Tailwind CSS file for your project without all the fuss.

Run the following command and you're off!

npx tailbuild [output file] --files=[files to search for CSS classes in and generate Tailwind from]

Here's a specific example where tailbuild will scour all the HTML files in the public/ directory for Tailwind classes and build a custom CSS file: dist/tailwind.css

npx tailbuild dist/tailwind.css --files="./public/**/*.html"

File Watching

You can configure tailbuild to watch these "markup reference" files and re-build if they are changed with the --watch option:

npx tailbuild dist/tailwind.css --files="./public/**/*.html" --watch

Production Builds

By adding --production tailbuild will minify the output CSS file.

npx tailbuild dist/tailwind.css --files="./public/**/*.html" --production

Framework Examples

Framework	Example Command
Laravel	npx tailbuild public/css/tailwind.css --files="resources/views/**/*.blade.php"
[Your Favorite Framework]	Open A PR!

Command Options

Options	Description
-o, --output	The file path to store tailbuild's output Tailwind CSS file
-f, --files, --purge	Specify (optionally multiple) glob patterns or files to use as a purge reference and a file watcher list if using --watch
-w, --watch	Watch all purge reference files for changes and re-build the CSS output
-i, --input	Specify a CSS input file (containing @tailwind base, etc...) for tailbuild to use as the basis for it's PostCSS build
-c, --config	Specify a custom Tailwind config file for reference when building the Tailwind CSS output file
-m, --minify	Minify all CSS output files using cssnano
--production	Minify all CSS output AND set NODE_ENV to "production" for other optimizations within Tailwind

How It Works

Tailbuild's pretty simple. Take a look at its only file of code for info: tailbuild.js

Enjoy!