How do I add animate-pulse to Blazor project?

[RobinAinscough]

All I'm trying to do is add Tailwind "animate pulse" to my Blazor Project, what I thought would be relatively simple task (I was wrong).

I inherited a blazor project using Tailwind v3.3.5. There is a styles.src.css but it seem to have limited definitions and/or selective use of some but not all of Tailwind definitions? For example styles.src.css will have a selector:

.form-display {
@apply shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-200 rounded-md;
}

My limited understanding, if I want to add more Tailwind functionality to my Blazor project I need to update the styles.src.css with the Tailwind feature I want? Example, I want to add animate-pulse so I was going to add the following to styles.src.css:

.text-pulse {
@apply animate-pulse text-red-600 text-lg font-semibold;
}

And now from console window (in my solutions root) I run:
npx tailwindcss -i .\Styles\styles.src.css -o .\wwwroot\css\styles.css

After looking at the generated styles.css, it's considerably different post NPX execution from the original (like VERY different). And significant parts of the app's UI are now broken or visually different.

Looking in my project dependencies for NPM and I see the following listed:
@tailwindcss/forms (0.5.3)
@tailwindcss/typography (0.5.9)
autoprefixer (10.4.14)
postcss (8.4.31)
tailwindcss (3.3.5)

Like I said, I inherited this and the contractor indicated all I need to do is run NPM RUN DEV ... this doesn't seem to be correct.

The tailwind.config.js is as follows:

module.exports = {
content: [
'./Components//*.{html,cshtml,razor}',
'./Pages//.{html,cshtml,razor}',
'./Shared/**/.{html,cshtml,razor}',
'../Library.Components/**/*.{html,cshtml,razor}',
],
theme: {
extend: {
},
},
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
],
}

The postcss.config.js is as follows:

// postcss.config.js
module.exports = {
plugins: [
tailwindcss: {},
autoprefixer: {},
]
}

The package.json is as follows:

{
"devDependencies": {
"autoprefixer": "^10.4.14",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.5"
},
"dependencies": {
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/typography": "^0.5.9"
},
"scripts": {
"dev": "npx tailwindcss -i ./Styles/styles.src.css -o ./wwwroot/css/styles.css",
"watch": "npx tailwindcss -i ./Styles/styles.src.css -o ./wwwroot/css/styles.css --watch",
"prod": "NODE_ENV=production npx tailwindcss -i ./Styles/styles.src.css -o ./wwwroot/css/styles.min.css --minify"
}
}

The _Host.csthml has following css references:

<link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css?@telerikUiForBlazorVersion" rel="stylesheet" />
<link href="_content/Telerik.UI.for.Blazor/css/kendo-font-icons/font-icons.css" rel="stylesheet" />
<link href="lib/fontawesome/css/all.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet" />
<link href="Toms.styles.css" rel="stylesheet" />

I've not been successful at finding any documentation that would be helpful on Tailwind integration into Blazor-Server projects with .NET 9. I've tried to get assistance, but even with $799 payment it seems Tailwind is "self-support" hence my posts.

Any suggestions on how to simply add "animate pulse" to my Blazor project without wiping out all the exist CSS?

Thanks, Rob.

[wongjn]

Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097
• https://x.com/adamwathan/status/1890406016291938701

Instead, consider adding the classes that you would @apply to the HTML directly:

<div class="animate-pulse text-red-600 text-lg font-semibold">

As for your broken styles, consider checking the content file globs cover all files that use Tailwind classes. Otherwise, it's very difficult from an outsider perspective to determine what could be the cause of inconsistency.

[wongjn]

The content array of file globs in the tailwind.config.js file should cover all files that use Tailwind classes.

[RobinAinscough]

Yes, tailwind.config.js (listed above) references all the file types that could/do use it.

ONLY Tailwind referenced elements in styles.src.css are actually usable in the blazor app ... I don't understand why? For example:

.header-bg-dark {
@apply bg-blue-800;
}

If try to do any "HTML direct" reference to bg-blue-600, nothing will visually render on the UI side (default black). If I use "HTML direct" bg-blue-800 then it will visually render on the UI side. It's only render those Tailwind elements that are referenced in styles.src.css. This is confusing for me, I expect ALL Tailwind elements to be available for HTML direct, but they're not?

[wongjn]

That does sound like a symptom of the content array of file globs in the tailwind.config.js file not covering all files that use Tailwind classes. It should just list file types. It should be an array of file path globs. What is the project-relative file path of the file that you tried to add bg-blue-600 to? Did you also rerun npm run dev after you saved the file?

[RobinAinscough]

Hmmm ... I removed an extra relative ".":
'../Library.Components/**/*.{html,cshtml,razor}',
to
'./Library.Components/**/*.{html,cshtml,razor}',

This is the content array:
content: [
'./Components//*.{html,cshtml,razor}',
'./Pages//.{html,cshtml,razor}',
'./Shared/**/.{html,cshtml,razor}',
'./Library.Components/**/*.{html,cshtml,razor}',
]

Which is correct for the project. The relative path change from .. to . made no difference.

That's the other issue I'm running into. npm run dev after I modify styles.src.css generates a styles.css VERY different from what is currently in the project. I was expecting it to just update the styles.css with one new entry for animate-pulse but instead the entire styles.css file has many differences, not just the one.

[wongjn]

Consider providing a git repo that reproduces the unexpected behavior you are experiencing if you'd like us to help troubleshoot further.