How to setup .NET Core Blazor Server with Tailwind CSS

mkdir TailwindDotNet
cd TailwindDotNet
dotnet new blazorserver
npm init -y
npm install -D tailwindcss autoprefixer postcss
npx tailwind init -p

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

“scripts”: {
“css:build”: “npx tailw…


This content originally appeared on DEV Community and was authored by Gavi Narra

mkdir TailwindDotNet
cd TailwindDotNet
dotnet new blazorserver
npm init -y
npm install -D tailwindcss autoprefixer postcss
npx 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


This content originally appeared on DEV Community and was authored by Gavi Narra


Print Share Comment Cite Upload Translate Updates
APA

Gavi Narra | Sciencx (2022-04-15T00:28:00+00:00) How to setup .NET Core Blazor Server with Tailwind CSS. Retrieved from https://www.scien.cx/2022/04/15/how-to-setup-net-core-blazor-server-with-tailwind-css/

MLA
" » How to setup .NET Core Blazor Server with Tailwind CSS." Gavi Narra | Sciencx - Friday April 15, 2022, https://www.scien.cx/2022/04/15/how-to-setup-net-core-blazor-server-with-tailwind-css/
HARVARD
Gavi Narra | Sciencx Friday April 15, 2022 » How to setup .NET Core Blazor Server with Tailwind CSS., viewed ,<https://www.scien.cx/2022/04/15/how-to-setup-net-core-blazor-server-with-tailwind-css/>
VANCOUVER
Gavi Narra | Sciencx - » How to setup .NET Core Blazor Server with Tailwind CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/04/15/how-to-setup-net-core-blazor-server-with-tailwind-css/
CHICAGO
" » How to setup .NET Core Blazor Server with Tailwind CSS." Gavi Narra | Sciencx - Accessed . https://www.scien.cx/2022/04/15/how-to-setup-net-core-blazor-server-with-tailwind-css/
IEEE
" » How to setup .NET Core Blazor Server with Tailwind CSS." Gavi Narra | Sciencx [Online]. Available: https://www.scien.cx/2022/04/15/how-to-setup-net-core-blazor-server-with-tailwind-css/. [Accessed: ]
rf:citation
» How to setup .NET Core Blazor Server with Tailwind CSS | Gavi Narra | Sciencx | https://www.scien.cx/2022/04/15/how-to-setup-net-core-blazor-server-with-tailwind-css/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts