Posted on • Originally published atankursheel.com on
Add Tailwind CSS to a Statiq website
In this article, I will be showing how we can integrateTailwind CSS withStatiq.
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
- InstallNode 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 callednode.
cdnodenpminstall-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 addtailwindcss andautoprefixer
module.exports={plugins:{tailwindcss:{},autoprefixer:{},},};Step 3: Configure Tailwind
Generate a config file using the Tailwind CLI utility
npx tailwindcss initThis 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 */@tailwindbase;@tailwindcomponents;@tailwindutilities;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.
<!DOCTYPEhtml><htmllang="en"><head><linkhref="/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
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
