Tailwind CSS is een hulpmiddel-eerste Css-framework voor het snel bouwen van custom designs. Het is een zeer aanpasbareM SK2 lage -niveau CsS-framewerk dat je alle bouwstenen geeft die je nodig hebt om zelf ontworpen ontwerpen te bouwen zonder vervelende, geconstateerde stijlen die je moet vechten om te overwinnen.

Eén van de grote voordelen van Tailwind over 'traditionele'CSS-frameworks zoals Bootstrap is dat tailwind een 'scanningM SK3 en bouwstadium bevat, zodat het alleen de CSS bevat die je daadwerkelijk gebruikt in je project.

Installatie

Een groot drawback vergeleken met Bootstrap is dat Tailwind geen 'drop in'Css-fileM SK2 is Je moet het installeren met npm of yarn. Dit).

npm install -D tailwindcss
npx tailwindcss init

Dit installeert Tailwind CSS en creëert een tailwind.config.js filein de wortel van je project. Deze lêer wordt gebruikt om Tailwind CSS te konfigureren.

Paket.json

Als je kijkt naar de bron van dit project Je zal zien dat ik een package.json file die de volgende definities bevat: '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"
  }
}

Dit zijn de 'scripts' die ik gebruik om de Tailwind CSS-file te bouwen. dev Script is degene die ik gebruik om de CSS-lêer te bouwen voor ontwikkeling. De watch Script is degene die ik gebruik om de CSS-file te bekijken voor veranderingen en herbouwen. build Script is degene die ik gebruik om de CSS-lêer te bouwen voor productie.

De devDependencies-sektie is net als je nuget-pakketten voor je .NET-projecten. Het zijn de pakketten die gebruikt worden om de CSS-lêer te bouwen.

Tailwind.config.js

Deze worden gebruikt samen met de tailwind.config.js Dit lêer wordt gebruikt om Tailwind CSS te konfigureren. tailwind.config.js Lêer dat ik gebruik:

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

Deze lêer wordt gebruikt om Tailwind CSS. te konfigureren. content Section is gebruikt om Tailwind CSS te vertellen waar je naar de CSS-klassen moet zoeken die je in je project gebruikt. Pages, Components, en Views folders. JeM SK1 zal merken dat dit ook kan 'cshtmlMST3 filesMSP4 Eén 'gotcha' voor tailwind is dat je er kan meedoen. <div class="hidden></div> Sections om ervoor te zorgen dat je alle benodigde css-klassen in de 'build' bevat die je niet hebt in je merker.

De gemeenschappelijke wetgeving van het land. safelist De sectie wordt gebruikt om Tailwind CSS te vertellen welke klasse in de CSS-file te inbegripen. darkMode Section wordt gebruikt om Tailwind CSS te vertellen dat ze de donkere modeklassen moeten gebruiken. De theme Section is gebruikt om het thema van Tailwind CSS. te konfigureren. plugins Dit wordt dan gebruikt door Tailwind om de CSS-file te compileren zoals sepcified in:.

"buildM SK1tw": "npx tailwindcss -i M./srcMST6cssMst7mainM st8cs s mst9o mmst10wwwrootMSt11csSmst12distMstr13main_{M st14cs мst15minify}Mst16

CSPROJ

Het laatste deel hiervan zit in de CSProj-file zelf. Dit bevat een sectie vlak voor het afsluiten. <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>

Zoals je ziet verwijst het naar de build script om de CSS op elk project te herbouwen build.