Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/manusoft/tailwindcssdemo
Tailwind css demo in Blazor Server
https://github.com/manusoft/tailwindcssdemo
Last synced: 8 days ago
JSON representation
Tailwind css demo in Blazor Server
- Host: GitHub
- URL: https://github.com/manusoft/tailwindcssdemo
- Owner: manusoft
- License: mit
- Created: 2023-11-02T07:10:25.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2023-11-02T08:12:03.000Z (about 1 year ago)
- Last Synced: 2023-11-02T09:27:35.521Z (about 1 year ago)
- Language: CSS
- Size: 350 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Tailwind Css Demo
## Configuration
- Create a new Blazor Server project ```TailwindCssDemo```
- Open Folder in file Explorer
- Open Terminal
- Check npm installed or not
``` sh
npm -v
```
2. Install npm (already installed skip this)
``` sh
npm install
```
3. Create ```package.json``` file
``` sh
npm init
```
4. Install packages ```tailwindcss```, ```cross-env```, ```postcss```, ```postcss-cli```, ```autoprefixer```, ```cssnano``` packages
``` sh
npm i -D tailwindcss cross-env postcss postcss-cli autoprefixer cssnano
```
6. Open ```package.json``` file and replace ```script``` section
``` json
"scripts": {
"buildcss:debug": "cross-env TAILWIND_MODE=build postcss ./Styles/tailwind.css -o ./wwwroot/css/tailwind.debug.css",
"buildcss:release": "cross-env NODE_ENV=production postcss ./Styles/tailwind.css -o ./wwwroot/css/tailwind.release.css"
},
```
```package.json```
``` json
{
"name": "tailwindcssdemo",
"version": "1.0.0",
"description": "Tailwind Css demo for Blazor Server",
"main": "index.js",
"scripts": {
"buildcss:debug": "cross-env TAILWIND_MODE=build postcss ./Styles/tailwind.css -o ./wwwroot/css/tailwind.debug.css",
"buildcss:release": "cross-env NODE_ENV=production postcss ./Styles/tailwind.css -o ./wwwroot/css/tailwind.release.css"
},
"author": "Manojbabu",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.16",
"cross-env": "^7.0.3",
"cssnano": "^6.0.1",
"postcss": "^8.4.31",
"postcss-cli": "^10.1.0",
"tailwindcss": "^3.3.5"
}
}
```
8. Create ```tailwind.config.js``` file in project folder
```tailwind.config.js```
``` js
module.exports = {
content: ["./**/*.{razor,cshtml,js}"],
theme: {
extend: {},
},
plugins: [],
}
```
9. Create a folder ```Styles``` in project folder
10. Create ```tailwind.css``` file in ```Styles``` folder
```tailwind.css```
``` css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
11. Create ```postcss.config.js``` file in project folder
```postcss.config.js```
``` js
module.exports = ({ env }) => ({
plugins: {
tailwindcss: { },
autoprefixer: { },
cssnano: env === "production" ? { preset: "default" } : false
},
})
```
11. Check script is working or not
``` sh
npm run buildcss:debug
```
If script is run successful, it will create ```tailwind.debug.css``` file in your ```wwwwroot\css``` folder
12. Open your project file
Add in ``````
```xml
node_modules/./last-install
```
Add after ``````
``` xml
```
```TailwindCssDemo.csproj```
```xml
net7.0
enable
enable
node_modules/./last-install
```
13. Add link ``` ``` in ```_Host.cshtml```
```_Host.cshtml```
```cshtml
@page "/"
@using Microsoft.AspNetCore.Components.Web
@namespace TailwindCssDemo.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
An error has occurred. This application may no longer respond until reloaded.
An unhandled exception has occurred. See browser dev tools for details.
Reload
🗙
```