Skip to content

Commit bd92520

Browse files
committed
chore: Add README.md
1 parent 97b5496 commit bd92520

File tree

1 file changed

+130
-0
lines changed

1 file changed

+130
-0
lines changed

README.md

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# DotnetDevKR.TailwindCSS
2+
3+
[![NuGet Version](https://img.shields.io/nuget/v/DotnetDevKR.TailwindCSS.svg)](https://www.nuget.org/packages/DotnetDevKR.TailwindCSS/)
4+
[![License: MPL 2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen.svg)](https://opensource.org/licenses/MPL-2.0)
5+
6+
A .NET MSBuild integration package for TailwindCSS that automatically compiles your TailwindCSS files during the build process. This package includes cross-platform TailwindCSS standalone executables and provides seamless integration with .NET projects.
7+
8+
## Features
9+
10+
- 🚀 **Automatic compilation** during MSBuild process
11+
- 📦 **No Node.js dependency** - uses standalone TailwindCSS CLI
12+
- 🔧 **MSBuild integration** with customizable properties
13+
14+
## Installation
15+
16+
Install the NuGet package in your .NET project:
17+
18+
```bash
19+
dotnet add package DotnetDevKR.TailwindCSS
20+
```
21+
22+
## Quick Start
23+
24+
> [!Warning]
25+
> Rebuilding when `dotnet watch` is not working, so If you use `dotnet watch`, hit `Ctrl` + `R`
26+
27+
1. **Install the package** in your project
28+
2. **Create a TailwindCSS input file** (e.g., `tailwind.css`):
29+
```css
30+
@import "tailwindcss";
31+
```
32+
3. **Configure MSBuild properties** in your `.csproj` file:
33+
```xml
34+
<Target Name="Configure" BeforeTargets="RunTailwindCSSTask">
35+
<PropertyGroup>
36+
<InputFilename>$(ProjectDir)tailwind.css</InputFilename>
37+
<OutputFilename>wwwroot\css\app.css</OutputFilename>
38+
<IsMinify>false</IsMinify>
39+
<DebugMode>true</DebugMode>
40+
</PropertyGroup>
41+
</Target>
42+
```
43+
4. **Build your project** - TailwindCSS will be compiled automatically!
44+
45+
## Configuration
46+
47+
Configure the TailwindCSS compilation by setting these properties in your project file:
48+
49+
| Property | Description | Default | Required |
50+
| ---------------- | ----------------------------------------- | ----------------- | -------- |
51+
| `InputFilename` | Path to the input TailwindCSS file | - | No |
52+
| `OutputFilename` | Path where the compiled CSS will be saved | - | ✅ Yes |
53+
| `IsMinify` | Enable CSS minification | `false` | No |
54+
| `DebugMode` | Generate source maps | `false` | No |
55+
| `ProjectDir` | Project directory for TailwindCSS context | Current directory | No |
56+
57+
### Example Configuration
58+
59+
```xml
60+
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
61+
62+
<PropertyGroup>
63+
<TargetFramework>net9.0</TargetFramework>
64+
</PropertyGroup>
65+
66+
<ItemGroup>
67+
<PackageReference Include="DotnetDevKR.TailwindCSS" Version="0.0.1" />
68+
</ItemGroup>
69+
70+
<Target Name="Configure" BeforeTargets="RunTailwindCSSTask">
71+
<PropertyGroup>
72+
<InputFilename>$(ProjectDir)tailwind.css</InputFilename>
73+
<OutputFilename>wwwroot\css\app.css</OutputFilename>
74+
<IsMinify Condition="'$(Configuration)' == 'Release'">true</IsMinify>
75+
<DebugMode Condition="'$(Configuration)' == 'Debug'">true</DebugMode>
76+
</PropertyGroup>
77+
</Target>
78+
79+
</Project>
80+
```
81+
82+
## Development Workflow
83+
84+
### For Development
85+
86+
- Set `DebugMode="true"` to generate source maps
87+
- Set `IsMinify="false"` for readable CSS output
88+
89+
### For Production
90+
91+
- Set `IsMinify="true"` to reduce file size
92+
- Set `DebugMode="false"` to disable source maps
93+
94+
## Example Projects
95+
96+
Check out the `DotnetDevKR.TailwindCSS.WebTest` folder for a complete Blazor WebAssembly example that demonstrates:
97+
98+
- Basic TailwindCSS integration
99+
- MSBuild configuration
100+
- File structure organization
101+
102+
## How It Works
103+
104+
1. **MSBuild Integration**: The package registers a build task that runs before the main build
105+
2. **Platform Detection**: Automatically detects your OS and architecture
106+
3. **TailwindCSS Execution**: Runs the appropriate TailwindCSS standalone executable
107+
4. **File Processing**: Compiles your input CSS file and outputs the result
108+
109+
## Requirements
110+
111+
- .NET 6.0 or higher
112+
- Any platform supported by .NET (Windows, macOS, Linux)
113+
114+
## Contributing
115+
116+
Contributions are welcome! Please feel free to submit a Pull Request.
117+
118+
## License
119+
120+
This project is licensed under the Mozilla Public License 2.0 - see the [LICENSE.md](LICENSE.md) file for details.
121+
122+
## Acknowledgments
123+
124+
- [TailwindCSS](https://tailwindcss.com/) for the amazing CSS framework (MIT LICENSE)
125+
- [TailwindCSS CLI](https://github.com/tailwindlabs/tailwindcss) for the standalone executable
126+
- [AspNetCore.SassCompiler](https://github.com/koenvzeijl/AspNetCore.SassCompiler) – inspiration for CSS compilation and tooling integration
127+
128+
---
129+
130+
Made with ❤️ by [DotnetDevKR](https://github.com/dotnetdev-kr) and [Forum](https://forum.dotnetdev.kr)

0 commit comments

Comments
 (0)