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 Node and npm
- Install .Net Core
- Create a .Net Core Console Application configured to use Statiq
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
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()
- 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.
Top comments (0)