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

npm install -D tailwindcss
npx tailwindcss init

Dies wird Tailwind CSS installieren und eine tailwind.config.js filein der Wurzel Ihres Projekts Diese Datei wird verwendet, um Tailwind CSS-S. zu konfigurieren

Paket .-json

Wenn Sie sich die Quelle dieses Projekts Sie werden sehen, dass ich eine package.json Datei, die folgende Definitionen enthält:

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

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

    <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