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 ( الجزء التالي هو من هذا).

npm install -D tailwindcss
npx tailwindcss init

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

بستة.json

إذا نظرتم إلى مصدر هذا المشروع سوف ترون أن لدي package.json ويحتوي على 'script' و |' |devDependencies | ' | تعريفات

{
  "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 ملف أستخدمه:

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

    <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 على كل مشروع بناء.