# Tailwind CSS & ASP.NET Core

<datetime class="hidden">2024-07-30T13:30</datetime>

<!--category-- ASP.NET, Tailwind -->
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ä](https://tailwindcss.com/docs/installation)).

```bash
npm install -D tailwindcss
npx tailwindcss init
```

Sillä otetaan käyttöön Tailwind CSS ja luodaan [`tailwind.config.js` ](#tailwindconfigjs) filein omien hankkeidenne ytimessä. Tämä tiedosto käytetään Tailwind CSS:n konfigurointiin

### Paketti.json

Jos tarkastelette [hankkeen lähde](https://github.com/scottgal/mostlylucidweb/tree/main/Mostlylucid) olette nähneet, että minulla on `package.json` , johon sisältyy seuraavat 'script

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

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

```xml

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