Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 15, 2022 12:28 am GMT

How to setup .NET Core Blazor Server with Tailwind CSS

mkdir TailwindDotNetcd TailwindDotNetdotnet new blazorservernpm init -ynpm install -D tailwindcss autoprefixer postcssnpx tailwind init -p

Edit package.json and add a run script for CSS generation

"scripts": {    "css:build": "npx tailwind build ./wwwroot/css/site.css -o ./wwwroot/css/output.css"  },

Delete bootstrap stuff

Image description

You site.css should include only the following lines

/*! @import */@tailwind base;@tailwind components;@tailwind utilities;

Add the following lines in tailwind.config.js

'./Pages/**/*.cshtml','./Pages/**/*.razor','./Views/**/*.chstml','./Views/**/*.razor','./Shared/**/*.razor',

Modify your .csproj to include a css build step

<Project Sdk="Microsoft.NET.Sdk.Web">  <PropertyGroup>    <TargetFramework>net6.0</TargetFramework>    <Nullable>enable</Nullable>    <ImplicitUsings>enable</ImplicitUsings>  </PropertyGroup>  <ItemGroup>        <UpToDateCheckBuilt Include="wwwroot/css/site.css" Set="Css" />        <UpToDateCheckBuilt Include="postcss.config.js" Set="Css" />        <UpToDateCheckBuilt Include="tailwind.config.js" Set="Css" />    </ItemGroup>    <Target Name="Tailwind" BeforeTargets="Build">        <Exec Command="npm run css:build"/>    </Target></Project>

Modify _Layout.cshtml to reference output.css instead of site.css and remove any bootstrap references

    <link href="css/output.css" rel="stylesheet" />

So now when you compile and run, it will build the output.css

Working with dotnet watch

Just run in a terminal window

npx tailwind build ./wwwroot/css/site.css -o ./wwwroot/css/output.css --watch

Then run dotnet watch

dotnet watch run

Image description


Original Link: https://dev.to/gavi/how-to-setup-net-core-blazor-server-with-tailwind-css-57gn

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To