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).

npm install -D tailwindcss
npx tailwindcss init

Detta kommer att installera Tailwind CSS och skapa en tailwind.config.js 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 du ' kommer se att jag har en package.json file som innefattar följande definitioner: 'script

{
  "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:

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

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