Skip to content

Angular starter with Tailwindcss, Purgecss, and Prettier all set up by default.

License

Notifications You must be signed in to change notification settings

wbroberts/angular-tailwind-starter

Repository files navigation

Angular Tailwind Starter

This is a starter repo for Angular projects that wish to use Tailwindcss with Purgecss. This reduces the amount of boilerplate and Googling to get everything working together.

Getting Started

git clone https://github.com/wbroberts/angular-tailwind-starter.git
cd angular-tailwind-starter
npm install
npm start

The npm start command will build the tailwind style sheet and then will run ng serve -o.

Building

npm run build

Building the application will generate all of the Tailwind classes and then all of the unused classes will be removed by Purgecss. After the css has been handled the application will be built and output in dist/< application name >.

Tailwindcss

npm run tailwind

Tailwind builds a styles.tailwind.css file in the src/ directory (the compiled file is ignored). The generated css is huge, so when the application is built all of the unused css is purged.

Purgecss

npm run purge

Purge css is ran when the application gets built. The default runs on the compiled code that is generated by Tailwind (styles.tailwind.css). All other css files are ignored.

Prettier with Husky

There is a prettier pre-commit hook that is hooked up by default. To turn it off just erase the Husky part of the package.json. To adjust the prettier config just make changes to the .prettierrc file.