# Endwind CSS ASP.. NET Kern

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

<!--category-- ASP.NET, Tailwind -->
Tailwind CSS ist ein Utility-Tool, das erste CSS-Framework für schnelles Bauen von benutzerdefinierten Designs.Es ist eine sehr anpassbare low-- level CSS-Rahmenwerk, das Ihnen alle Bausteine gibt, die Sie brauchen, um maßgeschneiderte Designs ohne lästige opinionated Stile zu bauen, müssen Sie kämpfen, um zu überschreiben.

Einer der großen Vorteile von Tailwind über '-Traditional-'- CSS Frameworks wie Bootstrap ist, dass Tail Wind ein '-Scanning enthält und Gebäudeschritt also nur den CSS beinhaltet, den Sie tatsächlich in Ihrem Projekt verwenden..-Dies bedeutet, dass Sie die gesamte Tail wind CSS Bibliothek in Ihr Projekt einbeziehen können und sich keine Sorgen um die Größe der CSS Datei machen können.

## Installation

Ein großer Nachteil im Vergleich zu Bootstrap ist, dass Tailwind nicht ein Drop-in-'. CSS-Datei ist. Sie müssen es mit npm oder Garn installieren. [diese](https://tailwindcss.com/docs/installation)).

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

Dies wird Tailwind CSS installieren und eine [`tailwind.config.js` ](#tailwindconfigjs) filein der Wurzel Ihres Projekts Diese Datei wird verwendet, um Tailwind CSS-S. zu konfigurieren

### Paket .-json

Wenn Sie sich die [Quelle dieses Projekts](https://github.com/scottgal/mostlylucidweb/tree/main/Mostlylucid) Sie werden sehen, dass ich eine `package.json` Datei, die folgende Definitionen enthält:

```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"
  }
}
```

Dies sind die Skripte, die ich benutze, um die Tailwind CSS-Datei zu bauen. `dev` script ist das, mit dem ich die CSS-Datei für die Entwicklung zusammenbaue. `watch` script ist das eine, mit dem ich die CSS-Datei für Änderungen zu sehen und es wieder aufzubauen `build` script ist das eine, mit dem ich die CSS-Datei für die Produktion erstellen

Der Abschnitt devDependencies ist wie Ihre Nuget-Pakete für Ihre -.-NET-Projekte, die zum Aufbau der CSS-Datei verwendet werden.

### Rückwärtswind.-config-.-js

Diese werden zusammen mit der `tailwind.config.js` Datei, die sich in der Wurzel des Projekts befindet Diese Datei wird verwendet, um Tailwind CSS.. zu konfigurieren Hier ist die `tailwind.config.js` Datei, die ich benutze

```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'),
    ]
};
```

Diese Datei wird verwendet, um Tailwind zu konfigurieren `content` Abschnitt wird verwendet, um Tailwind CSS zu sagen, wo Sie nach den CSS-Klassen suchen, die Sie in Ihrem Projekt verwenden. `Pages`, `Components`L 347 vom 20.12.2013, S. 671. `Views` Ordner .-Sie beachten, dass diese auch Dosen 'Cshtml .' dateien .
Eine für Rückenwind ist, dass Sie Nooe enthalten ` <div class="hidden></div> ` Sektionen, um sicherzustellen, dass Sie alle erforderlichen css Klassen in die ' build-', die Sie nicht haben in Ihrem Markup enthalten

Das `safelist` Abschnitt wird verwendet, um Tailwind CSS zu sagen, welche Klassen in der CSS-Datei enthalten sind. `darkMode` Abschnitt wird verwendet, um Tailwind CSS zu sagen, die dunklen Modus-Klassen zu verwenden. `theme` section wird verwendet, um das Thema von Tailwind zu konfigurieren `plugins` Abschnitt wird verwendet, um die Plugins zu enthalten, die Sie in Ihrem Projekt verwenden Dieses wird dann von Tailwind zum Kompilieren der CSS-Datei als sepcified verwendet.

,",px-Rückwindcs , -,i , ./,src/,css/,main-.,cssen , -,o , ./,wwwroot ,/,cß, /,dist/,mains.,csis ,--,minify -",

### CSPROJJ

Der letzte Teil davon ist in der CSProj-Datei selbst. `<Project> ` Tag-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>

```

Welche wie Sie sehen können, bezieht sich auf das Build-Skript zum Wiederaufbau des CSS auf jedem Projekt build