Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Ankur Sheel
Ankur Sheel

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

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
Enter fullscreen modeExit 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 modeExit fullscreen mode

Step 3: Configure postcss

Create a postcss.config.js file and addtailwindcss andautoprefixer

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

Step 3: Configure Tailwind

Generate a config file using the Tailwind CLI utility

npx tailwindcss init
Enter fullscreen modeExit 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 modeExit 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 modeExit fullscreen mode

Step 4: Add CSS

Create an input folder and add a _site.css

/*! @import */@tailwindbase;@tailwindcomponents;@tailwindutilities;
Enter fullscreen modeExit 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 modeExit 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.

<!DOCTYPEhtml><htmllang="en"><head><linkhref="/styles.css"rel="stylesheet"/></head><body>@RenderBody()
Enter fullscreen modeExit 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

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

  • Joined

More fromAnkur Sheel

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp