# Ταϊλβίντ CSS & ASP.NET Core

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

<!--category-- ASP.NET, Tailwind -->
Το Tailwind CSS είναι ένα utility-first CSS framework για γρήγορη κατασκευή προσαρμοσμένων σχεδίωνΜSK1 Είναι ένα πολύ εξατομικευμένο, χαμηλόM SK3level CSS frameworks που σας δίνει όλα τα κτίρια που χρειάζεστε για να οικοδομήσετε εντυπωσιακά σχέδια χωρίς καμία ενοχλητική γνώμη στυλ που πρέπει να αγωνιστείτε για να ξεπεράσειMST4

Ένα από τα μεγάλα πλεονεκτήματα του Tailwind πάνω 'traditional' CSS πλαίσια όπως το Bootstrap είναι ότι tailwind περιλαμβάνει ένα 'scanningM SK3 και οικοδόμησης βήμα έτσι μόνο περιλαμβάνει το CSS που χρησιμοποιείτε πραγματικά στο έργο σαςΜSK4 Αυτό σημαίνει ότι μπορείτε να συμπεριλάβετε ολόκληρη τη Βιβλιοθήκη CSS Tail Wind στο σχέδιο σας και δεν ανησυχούν για το μέγεθος του αρχείου CSS

## Εγκατάσταση

Ένα μεγάλο μειονέκτημα σε σύγκριση με το Bootstrap είναι ότι η Tailwind δεν είναι 'drop στο' CSS αρχείοM SK2 Πρέπει να την εγκαταστήσετε χρησιμοποιώντας npm ή yarn ΜSK3Το επόμενο τμήμα είναι από [Αυτό το](https://tailwindcss.com/docs/installation)).

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

Αυτό θα εγκαταστήσει το Tailwind CSS και θα δημιουργήσει ένα [`tailwind.config.js` ](#tailwindconfigjs) filein την ρίζα του έργου σας.Αυτό το αρχείο χρησιμοποιείται για να ρυθμίσετε Tailwind CSS.

### Συσκευασία.json

Αν κοιτάξετε το [Πηγή αυτού του έργου](https://github.com/scottgal/mostlylucidweb/tree/main/Mostlylucid) Σας αρέσει το ' ίσως να δείτε ότι έχω ένα `package.json` αρχείο το οποίο περιλαμβάνει τα ακόλουθα 'κρυπτογράφημαΜSK1 και ΜСК2εξαρτήσειςΜΣΚ3ορισμοίΜσΚ4

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

Αυτά είναι τα ' υπογραφές' που χρησιμοποιώ για την κατασκευή του αρχείου CSS TailwindM SK2 Το `dev` Το σενάριο είναι αυτό που χρησιμοποιώ για να δημιουργήσω το αρχείο CSS για την ανάπτυξη. `watch` Το σενάριο είναι αυτό που χρησιμοποιώ για να παρακολουθήσω το αρχείο CSS για αλλαγές και να το ανακαταστήσω. `build` Το σενάριο είναι αυτό που χρησιμοποιώ για να δημιουργήσω το αρχείο CSS για την παραγωγή.

Το τμήμα devDependencies μοιάζει με τα πακέτα nuget σας για τα έργα .NET. Αυτά είναι οι πακέτες που χρησιμοποιούνται για την κατασκευή του αρχείου CSSM SK2

### Ετικέτες .config.js

Χρησιμοποιούνται μαζί με την `tailwind.config.js` αρχείο που βρίσκεται στην ρίζα του έργου.Αυτό το αρχείο χρησιμοποιείται για τη διαμόρφωση Tailwind CSS.Εδώ είναι η `tailwind.config.js` Το αρχείο που χρησιμοποιώ:

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

Αυτό το αρχείο χρησιμοποιείται για να ρυθμίσετε το Tailwind CSS. `content` το τμήμα χρησιμοποιείται για να πείτε Tailwind CSS όπου να αναζητήσετε τις τάξεις CSS που χρησιμοποιείτε στο έργο σας. Σε ASP.NET Core αυτό θα περιλαμβάνει γενικά την `Pages`, `Components`, επιχειρήσεις και `Views` φάκελοι. You' θα σημειώσετε αυτό επίσης κενά M SK2cshtmlΜSK3 αρχείαMK4
Ένα 'gotcha ΜSK1 για το tailwind είναι ότι μπορεί να μην μπορείτε να συμπεριλάβετε ` <div class="hidden></div> ` τμήματα για να βεβαιωθείτε ότι περιλαμβάνετε όλες τις απαιτούμενες κλάσεις css στο 'build' that you donMK2t have in your markup ΜSK3.., added using codeM SK6

Η `safelist` το τμήμα χρησιμοποιείται για να πει Tailwind CSS ποιες κατηγορίες πρέπει να συμπεριληφθούν στο αρχείο CSS. `darkMode` το τμήμα χρησιμοποιείται για να πει Tailwind CSS για τη χρήση των κλάσεων σκοτεινής μορφής. `theme` Το τμήμα χρησιμοποιείται για να ρυθμίσετε το θέμα του Tailwind CSS. `plugins` Το τμήμα χρησιμοποιείται για να συμπεριλάβει τα plugins που χρησιμοποιείτε στο έργο σας. Αυτό χρησιμοποιείται στη συνέχεια από το Tailwind για την κατάρτιση του αρχείου CSS όπως διαχωρίζεται σε:

"buildΜSK1tw": ΜSK3npx tailwindcss -i ./src/cssMK7main.cSS SMK9o MMK10wwwrootMST11csMSC12distMSP13main.cts MSC15minifyMSS16

### ΚΕΦΑΛΑΙΟ

Το τελικό μέρος αυτού βρίσκεται στο ίδιο το αρχείο CSProj. Αυτό περιλαμβάνει ένα τμήμα ακριβώς πριν από την ολοκλήρωση `<Project> ` Ετικέτες ΜΣΚ0

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

```

Αυτό, όπως μπορείτε να δείτε αναφέρεται στο σενάριο κατασκευής για την επανεκσκευή του CSS σε κάθε έργο κατασκευής.