# Tailwind CSS & ASP.NET Core

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

<!--category-- ASP.NET, Tailwind -->
CSS "Tailwind" هو أداة -أول إطار CSS لبناء تصميمات مخصصة بسرعة . إنه قابل للتخصيص عالياً | , | منخفض |- | مستوى إطار CSS الذي يعطيك كل أجزاء البناء التي تحتاجها لبناء التصميمات المخصصة دون أي styles مزعجة لديك أن تكافح لتخطي .

أحد الفوائد العظيمة لTailwind من خلال 'traditional' إطارات CSS مثل Bootstrap هو أن Tailwind يحتوي على 'scanningM SK3 وخط بناء وبالتالي فقط يحتوي على CSS التي تستخدمها بالفعل في مشروعكMSC4 هذا يعني أنك تستطيع أن تضيف كل مكتبة Tail wind CSS إلى مشروعك ولا تقلق بشأن حجم ឯកសារ CSS

## التثبيت

أحد drawbacks الكبيرة مقارنة ب Bootstrap هو أن Tailwind ليس 'drop في'file CSSM SK2 تحتاج إلى تثبيته باستخدام npm أو yarn ( الجزء التالي هو من [هذا](https://tailwindcss.com/docs/installation)).

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

هذا سيقوم بتركيب "Tailwind CSS" وخلق [`tailwind.config.js` ](#tailwindconfigjs) Filein the root of your project. هذا fichier is used to configure Tailwind CSS.

### بستة.json

إذا نظرتم إلى [مصدر هذا المشروع](https://github.com/scottgal/mostlylucidweb/tree/main/Mostlylucid) سوف ترون أن لدي `package.json` ويحتوي على 'script' و |' |devDependencies | ' | تعريفات

```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"
  }
}
```

هذه هي 'scripts' التي أستخدمها لبناء ملف CSS "Tailwind" `dev` النص هو الذي أستخدمه لبناء ملف CSS للتطوير. `watch` النص هو الذي أستخدمه لمشاهدة ملف CSS للتغيرات وإعادة بناءه. `build` النص هو الذي أستخدمه لبناء ملف CSS للتصنيع.

القسم devDependencies يشبه بحزمة النوجت الخاصة بك لمشروعاتك .NET. إنها الحزم التي تستخدم لبناء ملف CSS

### Tailwind.config.js

هذه تستخدم مع `tailwind.config.js` File that is in the root of the project. This file is used to configure Tailwind CSS. Here is the `tailwind.config.js` ملف أستخدمه:

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

هذا الملف يستخدم لتنظيم CSS Tailwind. `content` يُستخدم لإخبار CSS "Tailwind" أين تبحث عن صفوف CSS التي تستخدمها في مشروعك. `Pages`, `Components`, و `Views` folders. تلاحظون أن هذا يمكن أيضاً 'cshtmlM SK3 файлы .
واحد 'gotcha' للرياح الهوائية هو أنه يمكنك أن تضيف ` <div class="hidden></div> ` أجزاء لتتأكد من أن تضيف كل صنفات ال css المطلوبة في 'build' التي لا تملكها ' وليست موجودة في العلامة التجارية الخاصة بك

الـ `safelist` يُستخدم الجزء لإخبار "Tailwind CSS" أي الكليات التي يجب أن تتضمنها في ملف CSS. `darkMode` يُستخدم الجزء لإخبار CSS عن إستخدام فئة الモード المظلم. `theme` يستعمل الجزء لتحديد موضوع "Tailwind CSS" `plugins` يتم استخدام هذا الجزء لدمج البرمجيات التي تستخدمها في مشروعك. ثم يتم استخدامه من قبل Tailwind لتجميع ឯកសារ CSS كما تم توصيلها في:

"buildM SK1tw": "npx tailwindcss | | - | ./ | src |/ | cgs | مSK7 | main | SSK8 | css ٬ - | o ./ | wwwroot |

### CSPROJ

الجزء الأخير من هذا في ملف CSProj نفسه. هذا يتضمن جزءا مباشرة قبل إغلاق `<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>

```

التي كما ترون تشير إلى برمجة بناء لإعادة بناء CSS على كل مشروع بناء.