Tailwind CSS on käyttötarkoitus-ensimmäinen CSS-puite räätälöityjen mallien nopeaa rakentamista varten . Se on erittäin räätällöitäväM SK2 alhainen-tasoinen CSS-kehys, joka antaa teille kaikki rakennusosat, joita tarvitsette rakentaa räätällytetyt mallit häiritsemättömien mielipiteiden välityksellä, jotka teidän on taisteltava ylittääksenne

Eräs Tailwindin suurista eduista 'perinteisissä'CSS-puitteissa, kuten Bootstrapissa, on se, että tailwind sisältää 'skannerinM SK3 ja rakentamista koskevan askeleen, joten se sisältää vain sen CSS:n, jota itse olette käyttänyt hankkeessanne.

Asetus

Eräs suuri haitta Bootstrapiin verrattuna on se, että Tailwind ei ole 'drop-mahdollisuudessaanM SK1CSS-fiiliin . vaan se on otettava käyttöön npm:n tai kanteen avulla. tämä).

npm install -D tailwindcss
npx tailwindcss init

Sillä otetaan käyttöön Tailwind CSS ja luodaan tailwind.config.js filein omien hankkeidenne ytimessä. Tämä tiedosto käytetään Tailwind CSS:n konfigurointiin

Paketti.json

Jos tarkastelette hankkeen lähde olette nähneet, että minulla on package.json , johon sisältyy seuraavat '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"
  }
}

Nämä ovat 'scripts', jota käytän rakentamaan Tailwindin CSS-asiakirjaa dev script on se, jota käytän rakentamaan CSS-asiakirjaa kehityksen kannalta. watch skriptti on se, jota käytän seuraamaan CSS-asiakirjaa muutoksista ja rakentamaan sitä uudelleen. build script on se, jota käytän rakentamaan tuotantoa varten CSS-tietokantaa.

DevDependencies -osasto on samanlainen kuin nuget-paketit .NET-hankkeillenne. Ne ovat paketteja, joita käytetään CSS-asiakirjan rakentamiseen

Tailwind.config.js

Näitä käytetään yhdessä tailwind.config.js asiakirja, joka on hankkeen ytimessä. Tämä asiakirja käytetään Tailwind CSS:n konfigurointiin tailwind.config.js asiakirja, jota käytän:

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

Asiakirjaa käytetään Tailwind CSS. content alaa käytetään kertomaan Tailwindin CSS:lle, missä etsiä omassa hankkeessanne käyttämiänne CSS-kursseja. Pages, Components, ja Views asiakirjat. Teidän on huomattava, että tämä voi myös olla M SK2cshtml' failitMSC4 Yksi 'gotchaM SK1 on, että voitte ottaa mukaan <div class="hidden></div> osia varmistaakseen, että olette sisällyttäneet kaikki vaaditut css-luokat 'build', joita ei ole ' omassa merkinnässänne (eM SK4gMSC5 lisättiin käyttäen koodiaMST6

Euroopan unionin safelist alaa käytetään kertomaan Tailwindin CSS:lle, mitkä luokit on sisällytettävä CSS-tietokantaan. darkMode alaa käytetään kertomaan Tailwind CSS:lle dark mode -luokan käyttämisestä. theme alaa käytetään Tailwindin CSS:n teeman konfiguroimiseen. plugins osa on käytetty sisällyttämään pluginit, joita olette käyttämässä hankkeessanne. Tämän jälkeen Tailwind käyttää kooamaan CSS-filen sellaisena kuin sepcified in :

"buildM SK1tw": "npx tailwindcss -i SSK5srcMST6cssMTSK7mainMSSK8\css

CSPROJ

Viimeinen osa tästä on itse CSProj-tietokannassa. Tähän sisältyy kohta juuri ennen sulkemista <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>

Kuten näette, se viittaa jokaisessa hankkeessa rakennettavan CSS:n jälleenrakentamiseen tarkoitettuun rakenneskriptiin.