Skip to content

Latest commit

 

History

History
30 lines (19 loc) · 1.61 KB

README.md

File metadata and controls

30 lines (19 loc) · 1.61 KB

Barebone Tailwind Setup

This is just a bare minimum tailwindcss configuration as a small demonstration for compiling tailwind without any heavy framework or webpack integration / setup. Primarily threw this together to mess around and experiment with tailwind customisation (themes, variants, plugins, etc).

It follows the standard installation guide with some basic configuration tweaks:

  • Dark mode is set to class
  • Purge is enabled by default based on ./public/**/*.html

Read the linked documentation to understand what these configuration properties mean.

The included html is based on tailwindtoolbox/Profile-Card, but I have updated it to use tailwinds built in dark variant classes instead. I also updated it to use the latest popper and tippy scripts at the time (6 and 2 respectively).

Usage

After running npm install

npm run build

This will compile the src/css/precompiled.css into public/css/compiled.css

Only the classes that are used in html files under the public directory will be included in the compiled tailwind output as per the purge configuration mentioned above.

npm run watch

Same as build but will watch the precompiled css and tailwind configuration files for saved changes and automatically recompile.

Inspect the output css or edit and view public/index.html as you see fit.