Το 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Το επόμενο τμήμα είναι από Αυτό το).

npm install -D tailwindcss
npx tailwindcss init

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

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

Αν κοιτάξετε το Πηγή αυτού του έργου Σας αρέσει το ' ίσως να δείτε ότι έχω ένα package.json αρχείο το οποίο περιλαμβάνει τα ακόλουθα 'κρυπτογράφημαΜSK1 και ΜСК2εξαρτήσειςΜΣΚ3ορισμοίΜσΚ4

{
  "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 Το αρχείο που χρησιμοποιώ:

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

    <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 σε κάθε έργο κατασκευής.