|
| 1 | +# DotnetDevKR.TailwindCSS |
| 2 | + |
| 3 | +[](https://www.nuget.org/packages/DotnetDevKR.TailwindCSS/) |
| 4 | +[](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