Blazor with TailwindCSS Integration

This project demonstrates the integration of TailwindCSS into a Blazor application, combining the power of Microsoft's Blazor framework with the utility-first styling approach of TailwindCSS.

Overview

TailwindCSS has emerged as a popular choice for frontend development due to its flexible utility classes and efficient workflow. Integrating TailwindCSS into a Blazor project allows developers to leverage its extensive set of styles while building interactive web applications with C# and .NET.

This repository provides a step-by-step guide and sample code for integrating TailwindCSS into a Blazor project, enabling developers to enhance the visual aesthetics and user experience of their web applications.

For a detailed tutorial on this integration, check out the accompanying WordPress post.

Features

Seamless integration of TailwindCSS into a Blazor project.
Utilization of TailwindCSS utility classes within Blazor components.
Watch mode for automatic generation of TailwindCSS styles.

Getting Started

To get started with this project, follow these steps:

Clone the repository:

git clone https://github.com/michaeltrinh7/blazor-with-tailwindcss.git

Navigate to the project directory:
```
cd blazor-with-tailwindcss
```
Download Tailwind's CLI:

If you don't have npm installed, download the TailwindCSS CLI from the release page and place it in a folder named "Tailwind" within the project directory.
Initialize Tailwind configuration:

Run the following command from the project directory to generate the Tailwind configuration file:
```
./../Tailwind/tailwindcss-windows-x64.exe init
```
Create Tailwind CSS file:

Inside the "Styles" folder, create a file named "tailwind.css" with the following content:
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Adapt App.razor:

Add the following line to the App.razor file to include the Tailwind CSS file:
```
<link rel="stylesheet" href="tailwind.css" />
```
Watch for changes:

Execute the following command to enable Tailwind to watch for changes and generate styles:
```
./../Tailwind/tailwindcss-windows-x64.exe -i ./Styles/tailwind.css -o ./wwwroot/tailwind.css --watch
```
Run the project:

Run the Blazor application and navigate to the Home page to see the integration of TailwindCSS in action.

Sample Code

Check out the sample Blazor components within this repository to see how TailwindCSS utility classes are utilized:

Home.razor: Demonstrates the usage of TailwindCSS styles within a Blazor component.

Contributing

Contributions to this project are welcome! If you find any issues or have suggestions for improvement, feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License.

michaeltrinh7 / blazor-with-tailwindcss