# TailwindCSS integration
## What is Tailwind CSS?
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
for more information take a look at [Tailwind CSS](https://tailwindcss.com/)
## How to configure an Aurelia 2 project with Tailwind CSS?
1- Run the following command in your terminal
```bash
npx makes aurelia
```
2- Use your type of project, I am using Default Typescript with Webpack and CSS.
3- Install Tailwind CSS in your project via this command
```bash
npm i tailwindcss -D
or
yarn add tailwindcss -D
```
4- After installation go to the root folder and run the below command too
```bash
./node_modules/.bin/tailwind init
```
This command will create a `tailwind.config.js` file in the root folder beside the `webpack.config.js` file with the following content
```typescript
/** @type {import('tailwindcss').Config} */
module.exports = {
purge: [],
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
```
5- Open your `webpack.config.js` file and add the below line into the `postcssLoader` literal object as a first item in `plugins` array. (Just like the picture)
```typescript
require('tailwindcss')('tailwind.config.js'),
```
6- Add these lines to the **top** of your main CSS file (for example `my-app.css`)
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
## How to test it?
In an easy way you can add the following Tailwind CSS snippet code to your project.
```css
Holy smokes!Something seriously bad happened.
```
I have added this to `my-app.html` now you can run the project by
```bash
npm run start
or
yarn run
```
Seems everything works
## What is PurgeCSS?
[Purgecss](https://github.com/FullHuman/purgecss) is a tool to remove unused CSS. It can be used as part of your development workflow. Purgecss comes with a JavaScript API, a CLI, and plugins for popular build tools.
## Why do we need PurgeCSS with Tailwind CSS?
Purgecss is particularly effective with Tailwind because Tailwind generates thousands of utility classes for you, most of which you probably won't actually use. For more information, you can read [Controlling File Size](https://tailwindcss.com/docs/controlling-file-size/).
If you run the `build` command, you will see the final bundle side is huge (even in production mode)
```bash
npm run build
or
yarn build
```
## How can we enable PurgeCSS?
Open the `tailwind.config.js` file and replace
```typescript
purge: [],
```
with
```typescript
purge: {
enabled: true,
content: ['./src/**/*.html'],
},
```
Now, execute the `build` command again and see the result.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.aurelia.io/~/revisions/NShYVVc01DvYc5bgBiwq/developer-guides/scenarios/tailwindcss-integration.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.