# PostCSS & Tailwind

## PostCSS

[PostCSS](https://postcss.org/) is a compiler for CSS. It enables buildtime transformation
of CSS files to convert SCSS, LESS, or other CSS-like languages into
standard CSS. It also has utilities for polyfills and browser-specific
prefixes. I think of it like a swiss-army knife for CSS: it helps ensure
that your styling intentions are actually rendered uniformily across
browsers.

PostCSS support is handled as a buildtime plugin with Mountaineer. It's
disabled by default. To enable, make sure you have `postcss-cli` installed
within your `views` project:

```bash
npm install postcss-cli
```

After this you can leverage the `PostCSSBundler` within your custom
build pipeline:

```python
from mountaineer.client_compiler.postcss import PostCSSBundler

controller = AppController(
    custom_builders=[
        PostCSSBundler(),
    ],
)
```

Adding the PostCSSBundler will find all the `.css` that you have
specified within your `views` directory and pass them through
PostCSS. Let's say you have the following CSS files:

```
/views/app/home/style.css
/views/app/detail/style.css
```

The compiler will pass each through PostCSS and deposit these artifacts into:

```
/views/_static/home_style.css
/views/_static/detail_style.css
```

You can then import this CSS file in whatever `<meta>` tag is relevant
to your project. See the [metadata documentation](/mountaineer/guides/metadata) for
more details on how to do this.

## Tailwind

Tailwind uses PostCSS to handle the tree shaking and project analysis
that allows it to output the minimal amount of CSS tags to correctly render
your project. If you set up the PostCSS extension like described above,
you should be able to follow the typical Tailwind [setup](https://tailwindcss.com/docs/installation) steps.

```typescript
// views/app/tailwind.config.ts
module.exports = {
  content: ["./app/**/*.{html,tsx,jsx,ts,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

```css
/* views/app/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Then export the built styles into your global metadata:

```python
controller = AppController(
    config=AppConfig(),
    global_metadata=Metadata(
        links=[LinkAttribute(rel="stylesheet", href="/static/app_main.css")]
    ),
    custom_builders=[
        PostCSSBundler(),
    ],
)
```
