├── BlazorTailwindWebAssembly
├── BlazorTailwindWebAssembly
│ ├── Pages
│ │ ├── Index.razor.css
│ │ ├── Index.razor
│ │ ├── Counter.razor.css
│ │ ├── Counter.razor
│ │ ├── FetchData.razor.css
│ │ └── FetchData.razor
│ ├── wwwroot
│ │ ├── favicon.ico
│ │ ├── icon-192.png
│ │ ├── css
│ │ │ ├── open-iconic
│ │ │ │ ├── font
│ │ │ │ │ ├── fonts
│ │ │ │ │ │ ├── open-iconic.eot
│ │ │ │ │ │ ├── open-iconic.otf
│ │ │ │ │ │ ├── open-iconic.ttf
│ │ │ │ │ │ ├── open-iconic.woff
│ │ │ │ │ │ └── open-iconic.svg
│ │ │ │ │ └── css
│ │ │ │ │ │ └── open-iconic-bootstrap.min.css
│ │ │ │ ├── ICON-LICENSE
│ │ │ │ ├── README.md
│ │ │ │ └── FONT-LICENSE
│ │ │ └── app.css
│ │ ├── sample-data
│ │ │ └── weather.json
│ │ └── index.html
│ ├── Styles
│ │ └── app.css
│ ├── _Imports.razor
│ ├── Program.cs
│ ├── App.razor
│ ├── tailwind.config.js
│ ├── Shared
│ │ ├── MainLayout.razor.css
│ │ ├── NavMenu.razor
│ │ ├── SurveyPrompt.razor
│ │ ├── NavMenu.razor.css
│ │ └── MainLayout.razor
│ ├── Properties
│ │ └── launchSettings.json
│ └── BlazorTailwindWebAssembly.csproj
└── BlazorTailwindWebAssembly.sln
├── .gitignore
└── README.md
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/Pages/Index.razor.css:
--------------------------------------------------------------------------------
1 | h1
2 | {
3 | @apply text-4xl font-bold mb-4 mt-[111px];
4 | }
5 |
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/Pages/Index.razor:
--------------------------------------------------------------------------------
1 | @page "/"
2 |
3 | Index
4 |
5 | Hello, world!
6 |
7 | Welcome to your new app.
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/wwwroot/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EngstromJimmy/BlazorTailwindTest/main/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/wwwroot/favicon.ico
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/wwwroot/icon-192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EngstromJimmy/BlazorTailwindTest/main/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/wwwroot/icon-192.png
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/Styles/app.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | .tableheader {
6 | @apply p-2 border-b-4 border-purple-600 text-left uppercase text-sm tracking-wider;
7 | }
8 |
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/wwwroot/css/open-iconic/font/fonts/open-iconic.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EngstromJimmy/BlazorTailwindTest/main/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/wwwroot/css/open-iconic/font/fonts/open-iconic.eot
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/wwwroot/css/open-iconic/font/fonts/open-iconic.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EngstromJimmy/BlazorTailwindTest/main/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/wwwroot/css/open-iconic/font/fonts/open-iconic.otf
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EngstromJimmy/BlazorTailwindTest/main/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/wwwroot/css/open-iconic/font/fonts/open-iconic.ttf
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/wwwroot/css/open-iconic/font/fonts/open-iconic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EngstromJimmy/BlazorTailwindTest/main/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/wwwroot/css/open-iconic/font/fonts/open-iconic.woff
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/Pages/Counter.razor.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | @apply text-4xl font-bold mb-4;
3 | }
4 |
5 | button {
6 | @apply mt-4 bg-gradient-to-br from-green-600 to-green-500 hover:from-green-500 hover:to-green-600 text-white p-2 rounded border border-green-600
7 | }
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/Pages/Counter.razor:
--------------------------------------------------------------------------------
1 | @page "/counter"
2 |
3 | Counter
4 |
5 | Counter
6 |
7 | Current count: @currentCount
8 |
9 | Click me
10 |
11 |
12 | @code {
13 |
14 | private int currentCount = 0;
15 |
16 | private void IncrementCount()
17 | {
18 | currentCount++;
19 | }
20 |
21 | }
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/Pages/FetchData.razor.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | @apply text-4xl font-bold mb-4;
3 | }
4 |
5 | table {
6 | @apply table-auto w-3/5 mt-4 mx-auto;
7 | }
8 |
9 | th {
10 | @apply p-2 border-b-4 border-purple-600 text-left uppercase text-sm tracking-wider;
11 | }
12 |
13 | tr {
14 | @apply hover:bg-green-100 odd:bg-purple-50;
15 | }
16 |
17 | td {
18 | @apply p-2;
19 | }
20 |
21 |
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/_Imports.razor:
--------------------------------------------------------------------------------
1 | @using System.Net.Http
2 | @using System.Net.Http.Json
3 | @using Microsoft.AspNetCore.Components.Forms
4 | @using Microsoft.AspNetCore.Components.Routing
5 | @using Microsoft.AspNetCore.Components.Web
6 | @using Microsoft.AspNetCore.Components.Web.Virtualization
7 | @using Microsoft.AspNetCore.Components.WebAssembly.Http
8 | @using Microsoft.JSInterop
9 | @using BlazorTailwindWebAssembly
10 | @using BlazorTailwindWebAssembly.Shared
11 |
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/Program.cs:
--------------------------------------------------------------------------------
1 | using BlazorTailwindWebAssembly;
2 | using Microsoft.AspNetCore.Components.Web;
3 | using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
4 |
5 | var builder = WebAssemblyHostBuilder.CreateDefault(args);
6 | builder.RootComponents.Add("#app");
7 | builder.RootComponents.Add("head::after");
8 |
9 | builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
10 |
11 | await builder.Build().RunAsync();
12 |
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/App.razor:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 | Not found
8 |
9 | Sorry, there's nothing at this address.
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/tailwind.config.js:
--------------------------------------------------------------------------------
1 | const colors = require('tailwindcss/colors')
2 |
3 | module.exports = {
4 | mode: 'jit',
5 | purge: [
6 | './**/*.html',
7 | './**/*.cshtml',
8 | './**/*.razor'
9 | ],
10 | darkMode: 'media',
11 | theme: {
12 | extend: {
13 | colors: {
14 | cyan: colors.cyan
15 | }
16 | },
17 | },
18 | variants: {
19 | textShadow: ['responsive', 'hover', 'focus'],
20 | },
21 | plugins: [
22 | ]
23 | }
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/wwwroot/sample-data/weather.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "date": "2018-05-06",
4 | "temperatureC": 1,
5 | "summary": "Freezing"
6 | },
7 | {
8 | "date": "2018-05-07",
9 | "temperatureC": 14,
10 | "summary": "Bracing"
11 | },
12 | {
13 | "date": "2018-05-08",
14 | "temperatureC": -13,
15 | "summary": "Freezing"
16 | },
17 | {
18 | "date": "2018-05-09",
19 | "temperatureC": -16,
20 | "summary": "Balmy"
21 | },
22 | {
23 | "date": "2018-05-10",
24 | "temperatureC": -2,
25 | "summary": "Chilly"
26 | }
27 | ]
28 |
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/Shared/MainLayout.razor.css:
--------------------------------------------------------------------------------
1 | main {
2 | @apply px-8 container mx-auto;
3 | }
4 |
5 |
6 | a {
7 | @apply uppercase mt-6 ml-8 text-white pb-2 border-b-4 mr-6 border-purple-700 hover:border-green-400;
8 | }
9 |
10 | header {
11 | @apply relative mb-16;
12 | }
13 |
14 | nav {
15 | @apply flex justify-between absolute inset-x-0 top-0;
16 | }
17 |
18 |
19 | .style1 {
20 | @apply text-white font-bold inset-x-0 text-center absolute top-40 text-5xl; /*text-shadow-xl*/
21 | }
22 |
23 | .style2 {
24 | @apply text-cyan-500 bg-white p-2 rounded; /*text-shadow-none*/
25 | }
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/Shared/NavMenu.razor:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Home
5 |
6 |
7 |
8 |
9 | Counter
10 |
11 |
12 |
13 |
14 | Fetch data
15 |
16 |
17 |
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/Shared/SurveyPrompt.razor:
--------------------------------------------------------------------------------
1 |
2 |
4 |
@Title
5 |
6 | Please take our
7 | brief survey and tell us what you think.
10 |
11 |
12 |
Blazor+Tailwind
8 | Loading...
15 |
16 |
17 |
18 |
An unhandled error has occurred. Reload
19 |
🗙
20 |
21 |
Weather forecast
5 |
6 | This component demonstrates fetching data from the server.
7 |
8 | @if (forecasts == null)
9 | {
10 |
11 | Loading...
12 |
13 | }
14 | else
15 | {
16 |
17 |
18 |
19 | Date
20 | Temp. (C)
21 | Temp. (F)
22 | Summary
23 |
24 |
25 |
26 | @foreach (WeatherForecast forecast in forecasts)
27 | {
28 |
29 | @forecast.Date.ToShortDateString()
30 | @forecast.TemperatureC
31 | @forecast.TemperatureF
32 | @forecast.Summary
33 |
34 | }
35 |
36 |
37 | }
38 |
39 | @code {
40 | private WeatherForecast[] forecasts;
41 |
42 | protected override async Task OnInitializedAsync()
43 | {
44 | forecasts = await Http.GetFromJsonAsync("sample-data/weather.json");
45 | }
46 |
47 | public class WeatherForecast
48 | {
49 | public DateTime Date { get; set; }
50 |
51 | public int TemperatureC { get; set; }
52 |
53 | public string Summary { get; set; }
54 |
55 | public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
56 | }
57 | }
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/Shared/MainLayout.razor:
--------------------------------------------------------------------------------
1 | @inherits LayoutComponentBase
2 |
3 | BlazorApp
4 |
5 |
15 |
16 |
17 | @Body
18 |
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly.csproj:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | net6.0
5 | enable
6 | enable
7 | 3.1.8
8 |
9 |
10 |
11 |
12 |
17 |
18 |
19 |
20 | tailwindcss-windows-x64.exe
21 | tailwindcss-linux-x64
22 | tailwindcss-macos-x64
23 | $([System.IO.Path]::Combine($(MSBuildThisFileDirectory), ".tailwind"))
24 | tailwindcss$([System.IO.Path]::GetExtension($(TailwindDownloadName)))
25 | $([System.IO.Path]::Combine($(TailwindExeDir), $(TailwindExeName)))
26 |
27 |
28 |
29 |
30 |
31 |
32 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
48 |
49 |
50 |
51 |
53 |
54 |
55 |
56 |
57 | true
58 | PreserveNewest
59 |
60 |
61 |
62 |
63 |
64 |
67 |
68 |
69 |
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/wwwroot/css/open-iconic/README.md:
--------------------------------------------------------------------------------
1 | [Open Iconic v1.1.1](http://useiconic.com/open)
2 | ===========
3 |
4 | ### Open Iconic is the open source sibling of [Iconic](http://useiconic.com). It is a hyper-legible collection of 223 icons with a tiny footprint—ready to use with Bootstrap and Foundation. [View the collection](http://useiconic.com/open#icons)
5 |
6 |
7 |
8 | ## What's in Open Iconic?
9 |
10 | * 223 icons designed to be legible down to 8 pixels
11 | * Super-light SVG files - 61.8 for the entire set
12 | * SVG sprite—the modern replacement for icon fonts
13 | * Webfont (EOT, OTF, SVG, TTF, WOFF), PNG and WebP formats
14 | * Webfont stylesheets (including versions for Bootstrap and Foundation) in CSS, LESS, SCSS and Stylus formats
15 | * PNG and WebP raster images in 8px, 16px, 24px, 32px, 48px and 64px.
16 |
17 |
18 | ## Getting Started
19 |
20 | #### For code samples and everything else you need to get started with Open Iconic, check out our [Icons](http://useiconic.com/open#icons) and [Reference](http://useiconic.com/open#reference) sections.
21 |
22 | ### General Usage
23 |
24 | #### Using Open Iconic's SVGs
25 |
26 | We like SVGs and we think they're the way to display icons on the web. Since Open Iconic are just basic SVGs, we suggest you display them like you would any other image (don't forget the `alt` attribute).
27 |
28 | ```
29 | ` *tag and a unique class name for each different icon in the* `` *tag.*
37 |
38 | ```
39 |
40 |
42 | ```
43 |
44 | Sizing icons only needs basic CSS. All the icons are in a square format, so just set the `` tag with equal width and height dimensions.
45 |
46 | ```
47 | .icon {
48 | width: 16px;
49 | height: 16px;
50 | }
51 | ```
52 |
53 | Coloring icons is even easier. All you need to do is set the `fill` rule on the `` tag.
54 |
55 | ```
56 | .icon-account-login {
57 | fill: #f00;
58 | }
59 | ```
60 |
61 | To learn more about SVG Sprites, read [Chris Coyier's guide](http://css-tricks.com/svg-sprites-use-better-icon-fonts/).
62 |
63 | #### Using Open Iconic's Icon Font...
64 |
65 |
66 | ##### …with Bootstrap
67 |
68 | You can find our Bootstrap stylesheets in `font/css/open-iconic-bootstrap.{css, less, scss, styl}`
69 |
70 |
71 | ```
72 | Primary
57 | ```
58 | would look something like this in Tailwind:
59 | ``` html
60 | Primary
61 | ```
62 | Disclaimer: I converted Boostrap to Tailwind using an online tool, there are definitely better ways of converting from Bootstrap. But this gives us a feeling of what the problem is.
63 | Our markup is going to be pretty bloated.
64 | I saw that there is an extension for Visual Studio Code that hides the classes in the editor to avoid all the clutter.
65 |
66 | This is also the preferred way of doing styling, we could group everything into a .button-class but that is not the preferred way in Tailwind.
67 | The idea is to style components separately in Angular and React for example.
68 | In Blazor we have components as well so it is probably a good match for Blazor as well.
69 |
70 | To use Tailwind we need a utility, a utility that collects all the classes used and creates a CSS.
71 | The simplest way to get this to work is to use NPM.
72 | One of the really nice things about working with Blazor is that I don't need NPM.
73 | There is also a CLI you can download from Tailwind (bypassing the need for NPM), but then how do we make sure everyone in the team is running the same version?
74 |
75 | ## The solution
76 |
77 | But what if there was a way to combine the technologies?
78 | Take the best from everything and avoid the "bad"?
79 |
80 | In this blog post, I am going to try to solve three problems.
81 | 1. Making sure everyone on the team is running the same version of the CLI
82 | 2. Make sure Blazor isolated CSS works
83 | 3. Not adding all the styles to the class tag
84 |
85 | ### Downloading the CLI
86 | Instead of having all the members of the team downloading and manage their Tailwind CLI we can use Visual Studio to download and install it for us automatically.
87 | In our csproj file, we can simply add the version we want to use and let Visual studio manage the versioning.
88 | Add the following to our csproj
89 | ```html
90 |
91 | 3.1.8
92 |
93 |
94 |
95 |
96 |
101 |
102 |
103 |
104 | tailwindcss-windows-x64.exe
105 | tailwindcss-linux-x64
106 | tailwindcss-macos-x64
107 | $([System.IO.Path]::Combine($(MSBuildThisFileDirectory), ".tailwind"))
108 | tailwindcss$([System.IO.Path]::GetExtension($(TailwindDownloadName)))
109 | $([System.IO.Path]::Combine($(TailwindExeDir), $(TailwindExeName)))
110 |
111 |
112 |
113 |
114 | ```
115 | This code will make sure the selected version is installed, and when we update the version it will make sure to update it for all members of the team.
116 |
117 | What about Isolated CSS?
118 | That is what we will look at next.
119 |
120 | ### Making Isolated CSS work
121 | When we make changes to isolated CSS, Visual Studio will take that CSS and produce a CSS file.
122 | We can hook into that process, letting Visual Studio produce the file just as before, and then let Tailwind rewrite the file so that we get the CSS classes we need.
123 |
124 | ``` csharp
125 |
126 |
127 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
143 |
144 | ```
145 |
146 | This code does two things.
147 | 1. Triggers Tailwind to generate files on Build
148 | 2. Triggers Tailwind to intercept and generate isolated CSS on save
149 |
150 | In most cases, this should be all we need, but sometimes we want to change the CSS without having to build the project and that can still be done using the CLI from the command line.
151 | I really like this approach because the tolling is in the workflow of Visual studio. I don't have to use the CLI if I don't want to.
152 |
153 | Besides this, we need to set up our project for Tailwind.
154 | Simply run the following command in the project folder:
155 | ```
156 | .\.tailwind\tailwindcss init
157 | ```
158 | This will give us a config file that we need to change a bit.
159 | By default the ```tailwind.config.js``` looks like this:
160 | /** @type {import('tailwindcss').Config} */
161 | module.exports = {
162 | content: [],
163 | theme: {
164 | extend: {},
165 | },
166 | plugins: [],
167 | }
168 |
169 | The content attribute we need to specify what files it should process.
170 | In our case we want it to process .razor, .html and .cshtml.
171 | This should support both Blazor server as well as Blazor WebAssembly.
172 |
173 | ```javascript
174 | /** @type {import('tailwindcss').Config} */
175 | module.exports = {
176 | content: [
177 | './**/*.html',
178 | './**/*.cshtml',
179 | './**/*.razor',
180 | ],
181 | theme: {
182 | extend: {},
183 | },
184 | plugins: [],
185 | }
186 |
187 | ```
188 |
189 | ### Semantic CSS?
190 | Now when everything is set up we can put our Tailwind styles inside our components by using isolated CSS.
191 | This means that the CSS we write is only affecting that particular component, which also means that we can write our semantic CSS right there.
192 | We don't need to add any classes in the markup itself but instead have the CSS inside the isolated CSS file.
193 |
194 | No NPM
195 | No manually downloading CLI
196 | No bloated markup
197 |
198 | I'll be honest I am still not a fan, but I think that since we can remove some of my pain points perhaps one day, I will start working with it =)
199 | It feels a bit like I am going out of my way to remove the dependency on NPM, and if you don't mind NPM you should definitely continue to use it.
200 | You can still use isolated CSS but use NPM commands instead of Tailwind CLI.
201 |
202 | ```Counter.razor``` with Tailwind:
203 |
204 | ```html
205 | @page "/counter"
206 |
207 | Counter
208 |
209 | Counter
210 |
211 | Current count: @currentCount
212 |
213 | Click me
215 | ```
216 | ```Counter.razor``` with Tailwind, isolated CSS and semantic CSS :
217 |
218 | ``` html
219 | @page "/counter"
220 |
221 | Counter
222 |
223 | Counter
224 |
225 | Current count: @currentCount
226 |
227 | Click me
228 | ```
229 | and the isolated CSS```Counter.razor.css```
230 | ``` css
231 | h1 {
232 | @apply text-4xl font-bold mb-4;
233 | }
234 |
235 | button {
236 | @apply mt-4 bg-gradient-to-br from-green-600 to-green-500 hover:from-green-500 hover:to-green-600 text-white p-2 rounded border border-green-600
237 | }
238 | ```
239 |
240 | The base of this Tailwind implementation is borrowed from Chris Sainty.
241 | You can find his repo [here](["https://github.com/chrissainty/ondotnet-tailwindcss"]).
242 |
243 |
244 |
245 |
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/wwwroot/css/app.css:
--------------------------------------------------------------------------------
1 | /*
2 | ! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com
3 | */
4 |
5 | /*
6 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
7 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
8 | */
9 |
10 | *,
11 | ::before,
12 | ::after {
13 | box-sizing: border-box;
14 | /* 1 */
15 | border-width: 0;
16 | /* 2 */
17 | border-style: solid;
18 | /* 2 */
19 | border-color: #e5e7eb;
20 | /* 2 */
21 | }
22 |
23 | ::before,
24 | ::after {
25 | --tw-content: '';
26 | }
27 |
28 | /*
29 | 1. Use a consistent sensible line-height in all browsers.
30 | 2. Prevent adjustments of font size after orientation changes in iOS.
31 | 3. Use a more readable tab size.
32 | 4. Use the user's configured `sans` font-family by default.
33 | */
34 |
35 | html {
36 | line-height: 1.5;
37 | /* 1 */
38 | -webkit-text-size-adjust: 100%;
39 | /* 2 */
40 | -moz-tab-size: 4;
41 | /* 3 */
42 | -o-tab-size: 4;
43 | tab-size: 4;
44 | /* 3 */
45 | font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
46 | /* 4 */
47 | }
48 |
49 | /*
50 | 1. Remove the margin in all browsers.
51 | 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
52 | */
53 |
54 | body {
55 | margin: 0;
56 | /* 1 */
57 | line-height: inherit;
58 | /* 2 */
59 | }
60 |
61 | /*
62 | 1. Add the correct height in Firefox.
63 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
64 | 3. Ensure horizontal rules are visible by default.
65 | */
66 |
67 | hr {
68 | height: 0;
69 | /* 1 */
70 | color: inherit;
71 | /* 2 */
72 | border-top-width: 1px;
73 | /* 3 */
74 | }
75 |
76 | /*
77 | Add the correct text decoration in Chrome, Edge, and Safari.
78 | */
79 |
80 | abbr:where([title]) {
81 | -webkit-text-decoration: underline dotted;
82 | text-decoration: underline dotted;
83 | }
84 |
85 | /*
86 | Remove the default font size and weight for headings.
87 | */
88 |
89 | h1,
90 | h2,
91 | h3,
92 | h4,
93 | h5,
94 | h6 {
95 | font-size: inherit;
96 | font-weight: inherit;
97 | }
98 |
99 | /*
100 | Reset links to optimize for opt-in styling instead of opt-out.
101 | */
102 |
103 | a {
104 | color: inherit;
105 | text-decoration: inherit;
106 | }
107 |
108 | /*
109 | Add the correct font weight in Edge and Safari.
110 | */
111 |
112 | b,
113 | strong {
114 | font-weight: bolder;
115 | }
116 |
117 | /*
118 | 1. Use the user's configured `mono` font family by default.
119 | 2. Correct the odd `em` font sizing in all browsers.
120 | */
121 |
122 | code,
123 | kbd,
124 | samp,
125 | pre {
126 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
127 | /* 1 */
128 | font-size: 1em;
129 | /* 2 */
130 | }
131 |
132 | /*
133 | Add the correct font size in all browsers.
134 | */
135 |
136 | small {
137 | font-size: 80%;
138 | }
139 |
140 | /*
141 | Prevent `sub` and `sup` elements from affecting the line height in all browsers.
142 | */
143 |
144 | sub,
145 | sup {
146 | font-size: 75%;
147 | line-height: 0;
148 | position: relative;
149 | vertical-align: baseline;
150 | }
151 |
152 | sub {
153 | bottom: -0.25em;
154 | }
155 |
156 | sup {
157 | top: -0.5em;
158 | }
159 |
160 | /*
161 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
162 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
163 | 3. Remove gaps between table borders by default.
164 | */
165 |
166 | table {
167 | text-indent: 0;
168 | /* 1 */
169 | border-color: inherit;
170 | /* 2 */
171 | border-collapse: collapse;
172 | /* 3 */
173 | }
174 |
175 | /*
176 | 1. Change the font styles in all browsers.
177 | 2. Remove the margin in Firefox and Safari.
178 | 3. Remove default padding in all browsers.
179 | */
180 |
181 | button,
182 | input,
183 | optgroup,
184 | select,
185 | textarea {
186 | font-family: inherit;
187 | /* 1 */
188 | font-size: 100%;
189 | /* 1 */
190 | font-weight: inherit;
191 | /* 1 */
192 | line-height: inherit;
193 | /* 1 */
194 | color: inherit;
195 | /* 1 */
196 | margin: 0;
197 | /* 2 */
198 | padding: 0;
199 | /* 3 */
200 | }
201 |
202 | /*
203 | Remove the inheritance of text transform in Edge and Firefox.
204 | */
205 |
206 | button,
207 | select {
208 | text-transform: none;
209 | }
210 |
211 | /*
212 | 1. Correct the inability to style clickable types in iOS and Safari.
213 | 2. Remove default button styles.
214 | */
215 |
216 | button,
217 | [type='button'],
218 | [type='reset'],
219 | [type='submit'] {
220 | -webkit-appearance: button;
221 | /* 1 */
222 | background-color: transparent;
223 | /* 2 */
224 | background-image: none;
225 | /* 2 */
226 | }
227 |
228 | /*
229 | Use the modern Firefox focus style for all focusable elements.
230 | */
231 |
232 | :-moz-focusring {
233 | outline: auto;
234 | }
235 |
236 | /*
237 | Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
238 | */
239 |
240 | :-moz-ui-invalid {
241 | box-shadow: none;
242 | }
243 |
244 | /*
245 | Add the correct vertical alignment in Chrome and Firefox.
246 | */
247 |
248 | progress {
249 | vertical-align: baseline;
250 | }
251 |
252 | /*
253 | Correct the cursor style of increment and decrement buttons in Safari.
254 | */
255 |
256 | ::-webkit-inner-spin-button,
257 | ::-webkit-outer-spin-button {
258 | height: auto;
259 | }
260 |
261 | /*
262 | 1. Correct the odd appearance in Chrome and Safari.
263 | 2. Correct the outline style in Safari.
264 | */
265 |
266 | [type='search'] {
267 | -webkit-appearance: textfield;
268 | /* 1 */
269 | outline-offset: -2px;
270 | /* 2 */
271 | }
272 |
273 | /*
274 | Remove the inner padding in Chrome and Safari on macOS.
275 | */
276 |
277 | ::-webkit-search-decoration {
278 | -webkit-appearance: none;
279 | }
280 |
281 | /*
282 | 1. Correct the inability to style clickable types in iOS and Safari.
283 | 2. Change font properties to `inherit` in Safari.
284 | */
285 |
286 | ::-webkit-file-upload-button {
287 | -webkit-appearance: button;
288 | /* 1 */
289 | font: inherit;
290 | /* 2 */
291 | }
292 |
293 | /*
294 | Add the correct display in Chrome and Safari.
295 | */
296 |
297 | summary {
298 | display: list-item;
299 | }
300 |
301 | /*
302 | Removes the default spacing and border for appropriate elements.
303 | */
304 |
305 | blockquote,
306 | dl,
307 | dd,
308 | h1,
309 | h2,
310 | h3,
311 | h4,
312 | h5,
313 | h6,
314 | hr,
315 | figure,
316 | p,
317 | pre {
318 | margin: 0;
319 | }
320 |
321 | fieldset {
322 | margin: 0;
323 | padding: 0;
324 | }
325 |
326 | legend {
327 | padding: 0;
328 | }
329 |
330 | ol,
331 | ul,
332 | menu {
333 | list-style: none;
334 | margin: 0;
335 | padding: 0;
336 | }
337 |
338 | /*
339 | Prevent resizing textareas horizontally by default.
340 | */
341 |
342 | textarea {
343 | resize: vertical;
344 | }
345 |
346 | /*
347 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
348 | 2. Set the default placeholder color to the user's configured gray 400 color.
349 | */
350 |
351 | input::-moz-placeholder, textarea::-moz-placeholder {
352 | opacity: 1;
353 | /* 1 */
354 | color: #9ca3af;
355 | /* 2 */
356 | }
357 |
358 | input::placeholder,
359 | textarea::placeholder {
360 | opacity: 1;
361 | /* 1 */
362 | color: #9ca3af;
363 | /* 2 */
364 | }
365 |
366 | /*
367 | Set the default cursor for buttons.
368 | */
369 |
370 | button,
371 | [role="button"] {
372 | cursor: pointer;
373 | }
374 |
375 | /*
376 | Make sure disabled buttons don't get the pointer cursor.
377 | */
378 |
379 | :disabled {
380 | cursor: default;
381 | }
382 |
383 | /*
384 | 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
385 | 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
386 | This can trigger a poorly considered lint error in some tools but is included by design.
387 | */
388 |
389 | img,
390 | svg,
391 | video,
392 | canvas,
393 | audio,
394 | iframe,
395 | embed,
396 | object {
397 | display: block;
398 | /* 1 */
399 | vertical-align: middle;
400 | /* 2 */
401 | }
402 |
403 | /*
404 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
405 | */
406 |
407 | img,
408 | video {
409 | max-width: 100%;
410 | height: auto;
411 | }
412 |
413 | *, ::before, ::after {
414 | --tw-border-spacing-x: 0;
415 | --tw-border-spacing-y: 0;
416 | --tw-translate-x: 0;
417 | --tw-translate-y: 0;
418 | --tw-rotate: 0;
419 | --tw-skew-x: 0;
420 | --tw-skew-y: 0;
421 | --tw-scale-x: 1;
422 | --tw-scale-y: 1;
423 | --tw-pan-x: ;
424 | --tw-pan-y: ;
425 | --tw-pinch-zoom: ;
426 | --tw-scroll-snap-strictness: proximity;
427 | --tw-ordinal: ;
428 | --tw-slashed-zero: ;
429 | --tw-numeric-figure: ;
430 | --tw-numeric-spacing: ;
431 | --tw-numeric-fraction: ;
432 | --tw-ring-inset: ;
433 | --tw-ring-offset-width: 0px;
434 | --tw-ring-offset-color: #fff;
435 | --tw-ring-color: rgb(59 130 246 / 0.5);
436 | --tw-ring-offset-shadow: 0 0 #0000;
437 | --tw-ring-shadow: 0 0 #0000;
438 | --tw-shadow: 0 0 #0000;
439 | --tw-shadow-colored: 0 0 #0000;
440 | --tw-blur: ;
441 | --tw-brightness: ;
442 | --tw-contrast: ;
443 | --tw-grayscale: ;
444 | --tw-hue-rotate: ;
445 | --tw-invert: ;
446 | --tw-saturate: ;
447 | --tw-sepia: ;
448 | --tw-drop-shadow: ;
449 | --tw-backdrop-blur: ;
450 | --tw-backdrop-brightness: ;
451 | --tw-backdrop-contrast: ;
452 | --tw-backdrop-grayscale: ;
453 | --tw-backdrop-hue-rotate: ;
454 | --tw-backdrop-invert: ;
455 | --tw-backdrop-opacity: ;
456 | --tw-backdrop-saturate: ;
457 | --tw-backdrop-sepia: ;
458 | }
459 |
460 | ::-webkit-backdrop {
461 | --tw-border-spacing-x: 0;
462 | --tw-border-spacing-y: 0;
463 | --tw-translate-x: 0;
464 | --tw-translate-y: 0;
465 | --tw-rotate: 0;
466 | --tw-skew-x: 0;
467 | --tw-skew-y: 0;
468 | --tw-scale-x: 1;
469 | --tw-scale-y: 1;
470 | --tw-pan-x: ;
471 | --tw-pan-y: ;
472 | --tw-pinch-zoom: ;
473 | --tw-scroll-snap-strictness: proximity;
474 | --tw-ordinal: ;
475 | --tw-slashed-zero: ;
476 | --tw-numeric-figure: ;
477 | --tw-numeric-spacing: ;
478 | --tw-numeric-fraction: ;
479 | --tw-ring-inset: ;
480 | --tw-ring-offset-width: 0px;
481 | --tw-ring-offset-color: #fff;
482 | --tw-ring-color: rgb(59 130 246 / 0.5);
483 | --tw-ring-offset-shadow: 0 0 #0000;
484 | --tw-ring-shadow: 0 0 #0000;
485 | --tw-shadow: 0 0 #0000;
486 | --tw-shadow-colored: 0 0 #0000;
487 | --tw-blur: ;
488 | --tw-brightness: ;
489 | --tw-contrast: ;
490 | --tw-grayscale: ;
491 | --tw-hue-rotate: ;
492 | --tw-invert: ;
493 | --tw-saturate: ;
494 | --tw-sepia: ;
495 | --tw-drop-shadow: ;
496 | --tw-backdrop-blur: ;
497 | --tw-backdrop-brightness: ;
498 | --tw-backdrop-contrast: ;
499 | --tw-backdrop-grayscale: ;
500 | --tw-backdrop-hue-rotate: ;
501 | --tw-backdrop-invert: ;
502 | --tw-backdrop-opacity: ;
503 | --tw-backdrop-saturate: ;
504 | --tw-backdrop-sepia: ;
505 | }
506 |
507 | ::backdrop {
508 | --tw-border-spacing-x: 0;
509 | --tw-border-spacing-y: 0;
510 | --tw-translate-x: 0;
511 | --tw-translate-y: 0;
512 | --tw-rotate: 0;
513 | --tw-skew-x: 0;
514 | --tw-skew-y: 0;
515 | --tw-scale-x: 1;
516 | --tw-scale-y: 1;
517 | --tw-pan-x: ;
518 | --tw-pan-y: ;
519 | --tw-pinch-zoom: ;
520 | --tw-scroll-snap-strictness: proximity;
521 | --tw-ordinal: ;
522 | --tw-slashed-zero: ;
523 | --tw-numeric-figure: ;
524 | --tw-numeric-spacing: ;
525 | --tw-numeric-fraction: ;
526 | --tw-ring-inset: ;
527 | --tw-ring-offset-width: 0px;
528 | --tw-ring-offset-color: #fff;
529 | --tw-ring-color: rgb(59 130 246 / 0.5);
530 | --tw-ring-offset-shadow: 0 0 #0000;
531 | --tw-ring-shadow: 0 0 #0000;
532 | --tw-shadow: 0 0 #0000;
533 | --tw-shadow-colored: 0 0 #0000;
534 | --tw-blur: ;
535 | --tw-brightness: ;
536 | --tw-contrast: ;
537 | --tw-grayscale: ;
538 | --tw-hue-rotate: ;
539 | --tw-invert: ;
540 | --tw-saturate: ;
541 | --tw-sepia: ;
542 | --tw-drop-shadow: ;
543 | --tw-backdrop-blur: ;
544 | --tw-backdrop-brightness: ;
545 | --tw-backdrop-contrast: ;
546 | --tw-backdrop-grayscale: ;
547 | --tw-backdrop-hue-rotate: ;
548 | --tw-backdrop-invert: ;
549 | --tw-backdrop-opacity: ;
550 | --tw-backdrop-saturate: ;
551 | --tw-backdrop-sepia: ;
552 | }
553 |
554 | .fixed {
555 | position: fixed;
556 | }
557 |
558 | .absolute {
559 | position: absolute;
560 | }
561 |
562 | .inset-x-0 {
563 | left: 0px;
564 | right: 0px;
565 | }
566 |
567 | .bottom-0 {
568 | bottom: 0px;
569 | }
570 |
571 | .left-0 {
572 | left: 0px;
573 | }
574 |
575 | .z-50 {
576 | z-index: 50;
577 | }
578 |
579 | .mx-auto {
580 | margin-left: auto;
581 | margin-right: auto;
582 | }
583 |
584 | .mt-6 {
585 | margin-top: 1.5rem;
586 | }
587 |
588 | .ml-8 {
589 | margin-left: 2rem;
590 | }
591 |
592 | .mr-6 {
593 | margin-right: 1.5rem;
594 | }
595 |
596 | .mb-4 {
597 | margin-bottom: 1rem;
598 | }
599 |
600 | .flex {
601 | display: flex;
602 | }
603 |
604 | .table {
605 | display: table;
606 | }
607 |
608 | .hidden {
609 | display: none;
610 | }
611 |
612 | .w-1\/3 {
613 | width: 33.333333%;
614 | }
615 |
616 | .w-full {
617 | width: 100%;
618 | }
619 |
620 | .rotate-2 {
621 | --tw-rotate: 2deg;
622 | transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
623 | }
624 |
625 | .transform {
626 | transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
627 | }
628 |
629 | .cursor-pointer {
630 | cursor: pointer;
631 | }
632 |
633 | .justify-between {
634 | justify-content: space-between;
635 | }
636 |
637 | .rounded-3xl {
638 | border-radius: 1.5rem;
639 | }
640 |
641 | .border-b-4 {
642 | border-bottom-width: 4px;
643 | }
644 |
645 | .border-t-2 {
646 | border-top-width: 2px;
647 | }
648 |
649 | .border-purple-700 {
650 | --tw-border-opacity: 1;
651 | border-color: rgb(126 34 206 / var(--tw-border-opacity));
652 | }
653 |
654 | .border-yellow-800 {
655 | --tw-border-opacity: 1;
656 | border-color: rgb(133 77 14 / var(--tw-border-opacity));
657 | }
658 |
659 | .bg-yellow-100 {
660 | --tw-bg-opacity: 1;
661 | background-color: rgb(254 249 195 / var(--tw-bg-opacity));
662 | }
663 |
664 | .bg-gradient-to-br {
665 | background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
666 | }
667 |
668 | .from-green-700 {
669 | --tw-gradient-from: #15803d;
670 | --tw-gradient-to: rgb(21 128 61 / 0);
671 | --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
672 | }
673 |
674 | .to-green-500 {
675 | --tw-gradient-to: #22c55e;
676 | }
677 |
678 | .p-6 {
679 | padding: 1.5rem;
680 | }
681 |
682 | .pb-2 {
683 | padding-bottom: 0.5rem;
684 | }
685 |
686 | .pt-2\.5 {
687 | padding-top: 0.625rem;
688 | }
689 |
690 | .pr-5 {
691 | padding-right: 1.25rem;
692 | }
693 |
694 | .pb-3 {
695 | padding-bottom: 0.75rem;
696 | }
697 |
698 | .pl-5 {
699 | padding-left: 1.25rem;
700 | }
701 |
702 | .pt-2 {
703 | padding-top: 0.5rem;
704 | }
705 |
706 | .text-center {
707 | text-align: center;
708 | }
709 |
710 | .font-bold {
711 | font-weight: 700;
712 | }
713 |
714 | .uppercase {
715 | text-transform: uppercase;
716 | }
717 |
718 | .tracking-wider {
719 | letter-spacing: 0.05em;
720 | }
721 |
722 | .text-white {
723 | --tw-text-opacity: 1;
724 | color: rgb(255 255 255 / var(--tw-text-opacity));
725 | }
726 |
727 | .text-yellow-900 {
728 | --tw-text-opacity: 1;
729 | color: rgb(113 63 18 / var(--tw-text-opacity));
730 | }
731 |
732 | .underline {
733 | -webkit-text-decoration-line: underline;
734 | text-decoration-line: underline;
735 | }
736 |
737 | .shadow-lg {
738 | --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
739 | --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
740 | box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
741 | }
742 |
743 | .transition-all {
744 | transition-property: all;
745 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
746 | transition-duration: 150ms;
747 | }
748 |
749 | .delay-150 {
750 | transition-delay: 150ms;
751 | }
752 |
753 | .duration-300 {
754 | transition-duration: 300ms;
755 | }
756 |
757 | .ease-in-out {
758 | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
759 | }
760 |
761 | .tableheader {
762 | border-bottom-width: 4px;
763 | --tw-border-opacity: 1;
764 | border-color: rgb(147 51 234 / var(--tw-border-opacity));
765 | padding: 0.5rem;
766 | text-align: left;
767 | font-size: 0.875rem;
768 | line-height: 1.25rem;
769 | text-transform: uppercase;
770 | letter-spacing: 0.05em;
771 | }
772 |
773 | .hover\:border-green-400:hover {
774 | --tw-border-opacity: 1;
775 | border-color: rgb(74 222 128 / var(--tw-border-opacity));
776 | }
777 |
778 | .hover\:no-underline:hover {
779 | -webkit-text-decoration-line: none;
780 | text-decoration-line: none;
781 | }
782 |
--------------------------------------------------------------------------------
/BlazorTailwindWebAssembly/BlazorTailwindWebAssembly/wwwroot/css/open-iconic/font/fonts/open-iconic.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 | Created by FontForge 20120731 at Tue Jul 1 20:39:22 2014
9 | By P.J. Onori
10 | Created by P.J. Onori with FontForge 2.0 (http://fontforge.sf.net)
11 |
12 |
13 |
14 |
543 |
544 |
--------------------------------------------------------------------------------
30 | ```
31 |
32 | #### Using Open Iconic's SVG Sprite
33 |
34 | Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.
35 |
36 | Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. *Tip: To make your icons easily style able, we suggest adding a general class to the* `