Add Tailwind CSS to a Statiq website
Tags: css, jamstack, webdev, dotnet
Published: 2022-02-21 23:45:55

---
title: Add Tailwind CSS to a Statiq website
published: true
date: 2021-08-27 00:00:00 UTC
tags: css, jamstack, webdev, dotnet
canonical_url: https://www.ankursheel.com/blog/add-tailwind-css-statiq-website
description: A guide to using TailwindCss with Statiq
---

In this article, I will be showing how we can integrate [Tailwind CSS](https://tailwindcss.com/) with [Statiq](https://www.statiq.dev/web/).

Many articles out there discuss the pros and cons of using Tailwind so that I won’t be doing that. All I will be saying is that Tailwind is a utility first framework with what might be considered an ugly-as syntax, but boy is it faster to build elegant components.

## Prerequisites

- Install [Node and npm](https://nodejs.org/en/)
- Install [.Net Core](https://dotnet.microsoft.com/)
- Create a [.Net Core Console Application configured to use Statiq](https://www.statiq.dev/web/)

## Install Tailwind

Tailwind can only be installed as an NPM package.

### Step 1: Create a folder called node

Because our core project is a .Net Core application, and we don’t need npm except for Tailwind, we will install it in a separate folder. This will avoid clutter in the root directory.

### Step 2: Install packages

We will install Tailwind and other peer dependencies inside a directory called _node_.

```bash
cd node
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```

- **PostCSS** is a preprocessor that transforms the CSS using plugins.
- **AuoPrefixer** is a PostCSS plugin to add vendor prefixes to CSS rules.

Our package.json should look something like this.

```json
{
    "devDependencies": {
        "@tailwindcss/typography": "^0.4.1",
        "autoprefixer": "^10.3.1",
        "postcss": "^8.3.6",
        "tailwindcss": "^2.2.7"
    }
}
```

### Step 3: Configure postcss

Create a postcss.config.js file and add _tailwindcss_ and _autoprefixer_

```js
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};
```

### Step 3: Configure Tailwind

Generate a config file using the Tailwind CLI utility

```bash
npx tailwindcss init
```

This will create a tailwind.config.js file.

We will update the purge section to optimize our CSS

```js
    purge: {
        enabled: true,
        content: ['../ **/input/** /*.cshtml'],
    },
```

- **Line 2** :Enable purge without having to set the NODE\_ENV to production
- **Line 3** :Scan our razor views files and remove any superfluous CSS from our final output file. We prefix the path with **../** because our config is inside a subfolder and we need to find the razor views from the root.

Our final configuration will look like this.

```js
module.exports = {
    purge: {
        enabled: true,
        content: ['../ **/input/** /*.cshtml'],
    },
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
};
```

### Step 4: Add CSS

Create an input folder and add a \_site.css

```css
/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### Step 5: Build the CSS

```
npx tailwind build -c ./tailwind.config.js -i ../input/_site.css -o ../Bookland/output/assets/styles.css
```

- **-c** : The config file path
- **-i** : The input file path. Our CSS file is in the input folder and called \_site.css
- **-o** : The output file path. Our output file is in the output folder and called styles.css

### Step 6: Link the stylesheet to a layout file

In our input folder, we will add a \_Layout.cshtml file and link to the stylesheet generated by tailwind and postcss.

```cs
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="/styles.css" rel="stylesheet"/>
</head>
<body>
@RenderBody()
```

- Reference to the styles.css file

## Conclusion

Now we should be able to add Tailwind classes to our Razor view. The generated site will use the styles outputted by Tailwind.

## Further reading

- [Tailwind Docs](https://tailwindcss.com/docs)