|
| 1 | +# Tailwind Style Builder Component for Blazor |
| 2 | + |
| 3 | +TailwindStyleBuilder is a utility for Blazor applications that integrates with Tailwind CSS via CDN to generate dynamic CSS classes. It allows developers to dynamically construct styles for their Blazor components, making it ideal for projects with rich, interactive, and dynamic content. The component provides a seamless way to apply Tailwind CSS styling without requiring a full build pipeline. By eliminating the need for a Node.js-based build system, it streamlines the integration of Tailwind CSS into Blazor projects, ensuring efficient and up-to-date design implementation. |
| 4 | + |
| 5 | +## Features |
| 6 | + |
| 7 | +- **Dynamic Style Building**: Generate CSS dynamically by specifying Tailwind CSS classes. |
| 8 | +- **Tailwind CDN Integration**: Uses the Tailwind CSS CDN to ensure up-to-date styling. |
| 9 | +- **Blazor Compatibility**: Designed specifically for Blazor-based projects. |
| 10 | +- **Support for Dynamic Content**: Ideal for projects that render content dynamically in Blazor and need corresponding Tailwind CSS styling. |
| 11 | + |
| 12 | +## Why TailwindStyleBuilder? |
| 13 | +At [FluentCMS](https://github.com/FluentCMS/FluentCMS), we leverage Tailwind CSS to build our UIs. Since page content is dynamic and fetched from the database, it requires efficient handling of styles. In our initial approach, we considered building styles on the server-side using Node.js. However, this method proved to be resource-intensive and did not perform well. |
| 14 | + |
| 15 | +We also explored using the Tailwind CDN for runtime styling. While this can work in some cases, generating styles on the fly during each request negatively impacts page load times and overall performance. |
| 16 | + |
| 17 | +This is where TailwindStyleBuilder comes in. With TailwindStyleBuilder, we optimize style generation by building the CSS only once when the page content is first updated or visited by an admin. On subsequent visits, we serve the pre-generated CSS file, ensuring fast and efficient page rendering without the overhead of runtime styling. |
| 18 | + |
| 19 | +By adopting TailwindStyleBuilder, we improve both performance and resource usage, making it an ideal solution for FluentCMS’s dynamic page content. |
| 20 | + |
| 21 | +## Use Cases |
| 22 | + |
| 23 | +- Dynamically styled components in Blazor. |
| 24 | +- Applications generated base where CSS classes ared on runtime data. |
| 25 | +- Projects using Tailwind CSS with Blazor, needing lightweight integration without a full build pipeline. |
| 26 | + |
| 27 | +## Installation |
| 28 | + |
| 29 | +To add **TailwindStyleBuilder** to your Blazor project, follow these steps: |
| 30 | + |
| 31 | +1. Install the package via NuGet: |
| 32 | + |
| 33 | + ```bash |
| 34 | + dotnet add package FluentCMS.Web.UI.TailwindStyleBuilder |
| 35 | + ``` |
| 36 | + |
| 37 | +2. Import the namespace in your Blazor components or pages: |
| 38 | + |
| 39 | + ```csharp |
| 40 | + @using FluentCMS.Web.UI.TailwindStyleBuilder |
| 41 | + ``` |
| 42 | + |
| 43 | + |
| 44 | +## Usage |
| 45 | + |
| 46 | +### Basic Example |
| 47 | + |
| 48 | +Here’s a simple example of how to use TailwindStyleBuilder to generate styles dynamically: |
| 49 | + |
| 50 | + |
| 51 | +Use the component in Head section of your App.razor file: |
| 52 | + |
| 53 | +```csharp |
| 54 | +<!DOCTYPE html> |
| 55 | +<html lang="en"> |
| 56 | + |
| 57 | +<head> |
| 58 | + ... |
| 59 | + <TailwinStyleBuilder /> |
| 60 | +</head> |
| 61 | + |
| 62 | +<body> |
| 63 | + ... |
| 64 | + <div class="bg-blue-200 text-blue-900 text-4xl"> |
| 65 | + Hello World! |
| 66 | + </div> |
| 67 | +</body> |
| 68 | + |
| 69 | +</html> |
| 70 | + |
| 71 | +``` |
| 72 | + |
| 73 | +now you are able to use Tailwind in your components. |
| 74 | + |
| 75 | +### Advanced Example |
| 76 | + |
| 77 | +While it functions similarly to using pure Tailwind CDN, our component offers an additional feature: the ability to generate CSS code dynamically and write it to the `wwwroot` directory. This allows you to use the generated CSS file directly, reducing runtime dependencies on the CDN and improving performance. |
| 78 | + |
| 79 | + |
| 80 | +To utilize the dynamic CSS generation feature, you can build an interactive component that acts as a wrapper and writes the generated CSS to a file: |
| 81 | + |
| 82 | +```csharp |
| 83 | +@rendermode RenderMode.InteractiveServer |
| 84 | + |
| 85 | +@if (System.IO.File.Exists($"wwwroot/{Name}.css")) |
| 86 | +{ |
| 87 | + <link rel="stylesheet" href=@($"/{Name}.css")> |
| 88 | +} |
| 89 | +else |
| 90 | +{ |
| 91 | + @* You can pass tailwind config using Config property *@ |
| 92 | + <TailwindStyleBuilder OnCssGenerated="OnCssGenerated" /> |
| 93 | +} |
| 94 | + |
| 95 | +@code { |
| 96 | + |
| 97 | + [Inject] IWebHostEnvironment Environment { get; set; } = default!; |
| 98 | + |
| 99 | + [Parameter] |
| 100 | + public string Name { get; set; } = "generated"; |
| 101 | + |
| 102 | + public void OnCssGenerated(string css) |
| 103 | + { |
| 104 | + var fileName = Name + ".css"; |
| 105 | + var filePath = Path.Combine(Environment.WebRootPath, "css", fileName); |
| 106 | + Directory.CreateDirectory(Path.GetDirectoryName(filePath)!); |
| 107 | + File.WriteAllText(filePath, css); |
| 108 | + } |
| 109 | +} |
| 110 | +``` |
| 111 | +Here is full implementation of Wrapper component used in fluentCMS [TailwindStyleBuilderWrapper.razor](https://github.com/fluentcms/FluentCMS/blob/dev/src/Frontend/FluentCMS.Web.UI/Components/TailwindStyleBuilderWrapper.razor) and [TailwindStyleBuilderWrapper.razor.cs](https://github.com/fluentcms/FluentCMS/blob/dev/src/Frontend/FluentCMS.Web.UI/Components/TailwindStyleBuilderWrapper.razor.cs) |
| 112 | + |
| 113 | +Now you can use this component in your page like this: |
| 114 | + |
| 115 | +```csharp |
| 116 | +@page "/example" |
| 117 | + |
| 118 | + |
| 119 | + @* will use example.css if exists, otherwise it will build that file in first visit *@ |
| 120 | +<TailwindStyles Name="example" /> |
| 121 | + |
| 122 | +<div class="p-4 bg-blue-100 text-blue-900"> |
| 123 | + <h1>Hello Tailwind!</h1> |
| 124 | +</div> |
| 125 | + |
| 126 | +``` |
| 127 | + |
| 128 | +## Update Styles |
| 129 | + |
| 130 | +to update the css files, you need to remove previously generated css file.\ |
| 131 | +in above example, when you update /example page, you should remove /wwwroot/example.css file. |
| 132 | + |
| 133 | +## Benefits |
| 134 | + |
| 135 | +- No need to pre-compile styles or configure a full Tailwind CSS build pipeline. |
| 136 | +- Tailwind CSS updates are automatically applied via the CDN. |
| 137 | +- Simplifies styling for Blazor components. |
| 138 | + |
| 139 | +## Limitations |
| 140 | + |
| 141 | +- CSS generation happens at runtime, which might impact performance for highly dynamic or complex styling requirements. (only first visit) |
| 142 | + |
| 143 | +## Contributing |
| 144 | + |
| 145 | +Contributions are welcome! Feel free to open issues or submit pull requests on the [GitHub repository](https://github.com/fluentcms/FluentCMS). |
| 146 | +
|
| 147 | +## License |
| 148 | + |
| 149 | +This project is licensed under the [MIT License](LICENSE). |
| 150 | + |
0 commit comments