DEV Community

Ankur Sheel
Ankur Sheel

Posted on • Originally published at ankursheel.com on

Add Tailwind CSS to a Statiq website

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

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
Enter fullscreen mode Exit fullscreen mode
  • 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"
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure postcss

Create a postcss.config.js file and add tailwindcss and autoprefixer

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure Tailwind

Generate a config file using the Tailwind CLI utility

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

This will create a tailwind.config.js file.

We will update the purge section to optimize our CSS

    purge: {
        enabled: true,
        content: ['../ **/input/** /*.cshtml'],
    },
Enter fullscreen mode Exit fullscreen mode
  • 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: [],
};
Enter fullscreen mode Exit fullscreen mode

Step 4: Add CSS

Create an input folder and add a _site.css

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Step 5: Build the CSS

npx tailwind build -c ./tailwind.config.js -i ../input/_site.css -o ../Bookland/output/assets/styles.css
Enter fullscreen mode Exit fullscreen mode
  • -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.

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="/styles.css" rel="stylesheet"/>
</head>
<body>
@RenderBody()
Enter fullscreen mode Exit fullscreen mode
  • 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

Discussion (0)