# Tailwind CSS & ASP.NET Core

<datetime class="hidden">2024-07-30T13:30</datetime>

<!--category-- ASP.NET, Tailwind -->
Tailwind CSS är ett verktyg-first CSS ram för att bygga färdiga designer snabbt. Det är en mycket tillhandahållbar~,~ lågt~-~nivån CSS ram som ger dig alla byggstenar du behöver för att skapa egna designer utan några stötande opinionserade styler du måste slåss mot för att överrida

En av de stora fördelarna med Tailwind jämfört med 'traditionella | ' | CSS ramverk som Bootstrap är att tailwind inkluderar en |' | skanning | МSK3 | och byggsteg så att den bara inkluderar den CSS du faktiskt använder i ditt projekt ♫ . | Det betyder att du kan inkludera hela Tailvinds CSS bibliotek i ditt project och inte oroa dig för storleken på CSS- pliken ♫

## Installation

En stor nackdel jämfört med Bootstrap är att Tailwind inte är en 'drop iM SK1 CSS-versionen . Du behöver installera den med hjälp av npm eller tråd. [den här](https://tailwindcss.com/docs/installation)).

```bash
npm install -D tailwindcss
npx tailwindcss init
```

Detta kommer att installera Tailwind CSS och skapa en [`tailwind.config.js` ](#tailwindconfigjs) filein root av ditt projekt. Den här pliken används för att konfigurera Tailwind CSS

### Pakett.json

Om du tittar på [källa till projektet](https://github.com/scottgal/mostlylucidweb/tree/main/Mostlylucid) du `'` kommer se att jag har en `package.json` file som innefattar följande definitioner: 'script

```json
{
  "scripts": {
    "dev": "npm-run-all --parallel dev:*",
    "dev:js": "webpack",
    "dev:tw": "npx tailwindcss -i ./src/css/main.css -o ./wwwroot/css/dist/main.css",
    "watch": "npm-run-all --parallel watch:*",
    "watch:js": "webpack --watch --env development",
    "watch:tw": "npx tailwindcss -i ./src/css/main.css -o ./wwwroot/css/dist/main.css --watch",
    "build": "npm-run-all --parallel build:*",
    "build:js": "webpack --env production",
    "build:tw": "npx tailwindcss -i ./src/css/main.css -o ./wwwroot/css/dist/main.css --minify"
  },
  "devDependencies": {
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/forms": "^0.5.7",
    "@tailwindcss/typography": "^0.5.12",
    "@types/alpinejs": "^3.13.10",
    "autoprefixer": "^10.4.19",
    "cssnano": "^7.0.4",
    "daisyui": "^4.12.10",
    "npm-run-all": "^4.1.5",
    "tailwindcss": "^3.4.3",
    "ts-loader": "^9.5.1",
    "typescript": "^5.4.5",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4"
  }
}
```

Det här är 'scripter' som jag använder för att bygga Tailwinds CSS-versionen `dev` skriptet är den som jag använder för att bygga CSS-fiilen för utvecklingen. `watch` skriptet är den som jag använder för att titta på CSS- pliken för ändringar och bygga om det. `build` skriptet är den som jag använder för att bygga CSS- pliken för produktionen.

DevDependencies-sektionen liknar nugetpaket för dina .NET-projekt

### Tailwind.config.js

Dessa används tillsammans med `tailwind.config.js` file that is in the root of the project. Den här filen används för att konfigurera Tailwind CSS `tailwind.config.js` file som jag använder:

```javascript
// tailwind.config.js

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
    content:   [
        './Pages/**/*.{html,cshtml}',
        './Components/**/*.{html,cshtml}',
        './Views/**/*.{html,cshtml}',
    ],
    safelist: ["dark"],
    darkMode: "class",
    theme: {

        },
    },
    plugins: [
        require("@tailwindcss/typography")({
            modifiers: [],
        }),
        require("@tailwindcss/forms"),
        require("@tailwindcss/aspect-ratio"),
        require('daisyui'),
    ]
};
```

Denna file används för att konfigurera Tailwind CSS. Den `content` sektionen används för att säga till Tailwind CSS var man ska leta efter de CSS-kurser som du använder i ditt projekt. `Pages`, `Components`, och `Views` Ordner. Du' lägg märke till att det här kan också göras.
Ett 'gotcha' för vindkraft är att du kan lägga till ` <div class="hidden></div> ` sektioner för att se till att du inbegriper alla nödvändiga css-kurser i 'build' som du inte har i ditt märke ' inte har

Den `safelist` sektionen används för att säga till Tailwind CSS vilka klasser som ska inkluderas i CSS: s dokument `darkMode` sektionen används för att säga till Tailwind CSS att använda den mörka modeklassen. `theme` sektionen används för att konfigurera temat i Tailwind CSS. `plugins` sektion används för att inkludera pluginarna du använder i ditt projekt. Detta används sedan av Tailwind för att kompilera CSS- pliken som sepcified in:

"buildM SK1tw": "npx tailwindcss ♫ ♫ -i ♫

### CSPROJ

Den sista delen av detta finns i CSProj- pliken i sig själv. Det här inkluderar en sektion precis innan slutet `<Project> ` tag:

```xml

    <Target Name="BuildCss" BeforeTargets="Compile">
        <Exec Command="npm run dev" Condition=" '$(Configuration)' == 'Debug' " />
        <Exec Command="npm run build" Condition=" '$(Configuration)' == 'Release' " EnvironmentVariables="NODE_ENV=production" />
    </Target>

```

Som ni ser refererar till byggnadsskript för att bygga om CSS på varje projekt byggnad.