Add Tailwind CSS to a Statiq website

Published on

Last Updated on

Estimated Reading Time: 2 min

Statiq tailwind website migration

In this article, I will be showing how we can integrate Tailwind CSS with Statiq.

Problem

As part of the migration from Gatsby to Statiq, I wanted to use Tailwind with Statiq. Tailwind is available as an NPM package, while Statiq is a .Net solution.

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 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.

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.

{
    "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

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

Step 3: Configure Tailwind

Generate a config file using the Tailwind CLI utility

npx tailwindcss init

This will create a tailwind.config.js file.

We will update the purge section to optimize our CSS

    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.

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

/*! @@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

We will add a _Layout.cshtml file in our input folder and link to the stylesheet generated by tailwind and postcss.

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="/styles.css" rel="stylesheet"/>
</head>
<body>
&#64;@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