{"id":18656471,"url":"https://github.com/manusoft/tailwindcssdemo","last_synced_at":"2025-11-05T21:30:20.276Z","repository":{"id":205049943,"uuid":"713267372","full_name":"manusoft/TailwindCssDemo","owner":"manusoft","description":"Tailwind css  demo in Blazor Server","archived":false,"fork":false,"pushed_at":"2023-11-02T08:12:03.000Z","size":358,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-27T14:44:30.162Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manusoft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-11-02T07:10:25.000Z","updated_at":"2023-11-02T07:10:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"77cafdee-a8d6-4ca4-b4bd-9f562db9bc09","html_url":"https://github.com/manusoft/TailwindCssDemo","commit_stats":null,"previous_names":["manusoft/tailwindcssdemo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manusoft%2FTailwindCssDemo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manusoft%2FTailwindCssDemo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manusoft%2FTailwindCssDemo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manusoft%2FTailwindCssDemo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manusoft","download_url":"https://codeload.github.com/manusoft/TailwindCssDemo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239471774,"owners_count":19644375,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T07:23:39.518Z","updated_at":"2025-11-05T21:30:20.112Z","avatar_url":"https://github.com/manusoft.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tailwind Css Demo\n\n## Configuration\n\n- Create a new Blazor Server project ```TailwindCssDemo```\n- Open Folder in file Explorer\n- Open Terminal\n\n- Check npm installed or not\n   \n   ``` sh\n   npm -v\n   ```\n   \n2. Install npm (already installed skip this)\n \n   ``` sh\n   npm install\n   ```\n3. Create ```package.json``` file\n\n   ``` sh\n   npm init\n   ```\n   \n4. Install packages ```tailwindcss```, ```cross-env```, ```postcss```, ```postcss-cli```, ```autoprefixer```, ```cssnano``` packages\n   \n   ``` sh \n   npm i -D tailwindcss cross-env postcss postcss-cli autoprefixer cssnano\n   ```\n   \n6. Open ```package.json``` file and replace ```script``` section\n   \n   ``` json\n    \"scripts\": {\n     \"buildcss:debug\": \"cross-env TAILWIND_MODE=build postcss ./Styles/tailwind.css -o ./wwwroot/css/tailwind.debug.css\",\n     \"buildcss:release\": \"cross-env NODE_ENV=production postcss ./Styles/tailwind.css -o ./wwwroot/css/tailwind.release.css\"\n   },\n   ```\n\n   ```package.json```\n   ``` json\n   {\n     \"name\": \"tailwindcssdemo\",\n     \"version\": \"1.0.0\",\n     \"description\": \"Tailwind Css demo for Blazor Server\",\n     \"main\": \"index.js\",\n     \"scripts\": {\n       \"buildcss:debug\": \"cross-env TAILWIND_MODE=build postcss ./Styles/tailwind.css -o ./wwwroot/css/tailwind.debug.css\",\n       \"buildcss:release\": \"cross-env NODE_ENV=production postcss ./Styles/tailwind.css -o ./wwwroot/css/tailwind.release.css\"\n     },\n     \"author\": \"Manojbabu\",\n     \"license\": \"ISC\",\n     \"devDependencies\": {\n       \"autoprefixer\": \"^10.4.16\",\n       \"cross-env\": \"^7.0.3\",\n       \"cssnano\": \"^6.0.1\",\n       \"postcss\": \"^8.4.31\",\n       \"postcss-cli\": \"^10.1.0\",\n       \"tailwindcss\": \"^3.3.5\"\n      }\n   }\n   ```\n   \n8. Create ```tailwind.config.js``` file in project folder\n\n   ```tailwind.config.js```\n   ``` js\n   module.exports = {\n    content: [\"./**/*.{razor,cshtml,js}\"],\n    theme: {\n        extend: {},\n    },\n    plugins: [],\n   }\n   ```\n   \n9. Create a folder ```Styles``` in project folder\n10. Create ```tailwind.css``` file in ```Styles``` folder\n   \n     ```tailwind.css```\n     ``` css\n     @tailwind base;\n     @tailwind components;\n     @tailwind utilities;\n     ```\n   \n11. Create ```postcss.config.js``` file in project folder\n\n     ```postcss.config.js```\n     ``` js\n     module.exports = ({ env }) =\u003e ({\n      plugins: {\n          tailwindcss: { },\n          autoprefixer: { },\n          cssnano: env === \"production\" ? { preset: \"default\" } : false\n      },\n     })\n     ```\n   \n11. Check script is working or not\n\n    ``` sh\n    npm run buildcss:debug\n    ```\n    If script is run successful, it will create ```tailwind.debug.css``` file in your ```wwwwroot\\css``` folder\n\n12. Open your project file\n    Add in ```\u003cPropertyGroup\u003e```\n    \n    ```xml\n    \u003cNpmLastInstall\u003enode_modules/./last-install\u003c/NpmLastInstall\u003e\n    ```\n\n    Add after ```\u003cPropertyGroup\u003e```\n\n    ``` xml\n    \u003cTarget Name=\"CheckNPMInstalled\" BeforeTargets=\"InstallNPM\"\u003e\n\t    \u003cExec Command=\"npm -v\" ContinueOnError=\"true\"\u003e\n\t\t  \u003cOutput TaskParameter=\"ExitCode\" PropertyName=\"ErrorCode\" /\u003e\n\t    \u003c/Exec\u003e\n\n\t    \u003cError Condition=\"'$(ErrorCode)' != '0'\" Text=\"You must install npm to run this task\" /\u003e\n    \u003c/Target\u003e\n\n    \u003cTarget Name=\"InstallNPM\" BeforeTargets=\"BuildTailwindCSS\"\u003e\n    \t\u003cExec Command=\"npm install\" /\u003e\n    \t\u003cTouch Files=\"$(NpmLastInstall)\" AlwaysCreate=\"true\" /\u003e\n    \u003c/Target\u003e\n\n    \u003cTarget Name=\"BuildTailwindCSS\" BeforeTargets=\"Compile\"\u003e\n    \t\u003cExec Command=\"npm run buildcss:debug\" Condition=\"'$(Configuration)' == 'Debug'\" /\u003e\n    \t\u003cExec Command=\"npm run buildcss:release\" Condition=\"'$(Configuration)' == 'Release'\" /\u003e\n    \u003c/Target\u003e\n    ```\n\n    ```TailwindCssDemo.csproj```\n    ```xml\n    \u003cProject Sdk=\"Microsoft.NET.Sdk.Web\"\u003e\n\n    \t\u003cPropertyGroup\u003e\n    \t\t\u003cTargetFramework\u003enet7.0\u003c/TargetFramework\u003e\n    \t\t\u003cNullable\u003eenable\u003c/Nullable\u003e\n    \t\t\u003cImplicitUsings\u003eenable\u003c/ImplicitUsings\u003e\n    \t\t\u003cNpmLastInstall\u003enode_modules/./last-install\u003c/NpmLastInstall\u003e\n    \t\u003c/PropertyGroup\u003e\n    \n    \t\u003cTarget Name=\"CheckNPMInstalled\" BeforeTargets=\"InstallNPM\"\u003e\n    \t\t\u003cExec Command=\"npm -v\" ContinueOnError=\"true\"\u003e\n    \t\t\t\u003cOutput TaskParameter=\"ExitCode\" PropertyName=\"ErrorCode\" /\u003e\n    \t\t\u003c/Exec\u003e\n    \n    \t\t\u003cError Condition=\"'$(ErrorCode)' != '0'\" Text=\"You must install npm to run this task\" /\u003e\n    \t\u003c/Target\u003e\n    \n    \t\u003cTarget Name=\"InstallNPM\" BeforeTargets=\"BuildTailwindCSS\"\u003e\n    \t\t\u003cExec Command=\"npm install\" /\u003e\n    \t\t\u003cTouch Files=\"$(NpmLastInstall)\" AlwaysCreate=\"true\" /\u003e\n    \t\u003c/Target\u003e\n    \n    \t\u003cTarget Name=\"BuildTailwindCSS\" BeforeTargets=\"Compile\"\u003e\n    \t\t\u003cExec Command=\"npm run buildcss:debug\" Condition=\"'$(Configuration)' == 'Debug'\" /\u003e\n    \t\t\u003cExec Command=\"npm run buildcss:release\" Condition=\"'$(Configuration)' == 'Release'\" /\u003e\n    \t\u003c/Target\u003e\n\t\n    \u003c/Project\u003e\n    ```\n\n13. Add link ```\u003clink href=\"css/tailwind.debug.css\" rel=\"stylesheet\" /\u003e ``` in ```_Host.cshtml```\n\n    ```_Host.cshtml```\n    ```cshtml\n    @page \"/\"\n    @using Microsoft.AspNetCore.Components.Web\n    @namespace TailwindCssDemo.Pages\n    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers\n    \n    \u003c!DOCTYPE html\u003e\n    \u003chtml lang=\"en\"\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"utf-8\" /\u003e\n        \u003cbase href=\"~/\" /\u003e\n        \u003clink href=\"css/site.css\" rel=\"stylesheet\" /\u003e\n        \u003clink href=\"css/tailwind.debug.css\" rel=\"stylesheet\" /\u003e \n        \u003ccomponent type=\"typeof(HeadOutlet)\" render-mode=\"ServerPrerendered\" /\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003ccomponent type=\"typeof(App)\" render-mode=\"ServerPrerendered\" /\u003e\n    \n        \u003cdiv id=\"blazor-error-ui\"\u003e\n            \u003cenvironment include=\"Staging,Production\"\u003e\n                An error has occurred. This application may no longer respond until reloaded.\n            \u003c/environment\u003e\n            \u003cenvironment include=\"Development\"\u003e\n                An unhandled exception has occurred. See browser dev tools for details.\n            \u003c/environment\u003e\n            \u003ca href=\"\" class=\"reload\"\u003eReload\u003c/a\u003e\n            \u003ca class=\"dismiss\"\u003e🗙\u003c/a\u003e\n        \u003c/div\u003e\n    \n        \u003cscript src=\"_framework/blazor.server.js\"\u003e\u003c/script\u003e\n    \u003c/body\u003e\n    \u003c/html\u003e\n    ```\n\n    \n    \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanusoft%2Ftailwindcssdemo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanusoft%2Ftailwindcssdemo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanusoft%2Ftailwindcssdemo/lists"}