Tailwind CSS एक यूटिलिटी है।

बूटस्ट्रैप जैसे CSS फ्रेमवर्कों पर 'पारंपरिक'से अधिक Tailwind का एक बड़ा लाभ यह है कि tailwind में एक 'स्कैनिंगM SK3 और निर्माण चरण शामिल है तो केवल आप वास्तव में अपने परियोजना में उपयोग के लिए सीएसएस शामिल करता है।

संस्थापन

Bootstrap की तुलना में एक बड़ा त्रुटि यह है कि Tailwind एक 'drop नहीं है। यह).

npm install -D tailwindcss
npx tailwindcss init

यह Tailwind CSS संस्थापित करेगा और एक tailwind.config.js अपने परियोजना के मूल में फ़ाइल. इस फ़ाइल का उपयोग Tailwind CSS को कॉन्फ़िगर करने के लिए किया जाता है

पैकेज

अगर आप देखो इस परियोजना का स्रोत आप ' देखेंगे कि मेरे पास एक है 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' जो मैं Tailwind CSS फ़ाइल बनाने के लिए उपयोग करता हूँ dev स्क्रिप्ट एक है कि मैं विकास के लिए सीएसएस फ़ाइल बनाने के लिए प्रयोग करता हूँ watch स्क्रिप्ट एक है कि मैं परिवर्तनों के लिए सीएसएस फ़ाइल देखने और इसे पुनः निर्माण करने के लिए प्रयोग करता हूँ build स्क्रिप्ट एक है कि मैं उत्पादन के लिए सीएसएस फ़ाइल बनाने के लिए प्रयोग करता हूँ

devDependencies सेक्शन आपके .NET परियोजनाओं के लिए आपके nuget पैकेजों की तरह है

टेलविंड.config.js

इन के साथ उपयोग किया जाता है tailwind.config.js फ़ाइल जो परियोजना के मूल में है. इस फ़ाइल का उपयोग Tailwind CSS को कॉन्फ़िगर करने के लिए किया जाता है 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'),
    ]
};

इस फ़ाइल का उपयोग Tailwind CSS को कॉन्फ़िगर करने के लिए किया जाता है content सेक्शन का उपयोग Tailwind CSS को बताने के लिए किया जाता है कि आप अपने परियोजना में प्रयोग कर रहे हैं सीएसएस वर्गों की खोज कहाँ करें Pages, Components, और Views फ़ोल्डर एक 'gotcha' के लिए tailwind है कि आप शामिल करने के लिए Nooe कर सकते हैं <div class="hidden></div> यह सुनिश्चित करने के लिए कि आप सभी आवश्यक css वर्गों को अपने मार्कअप में नहीं है 'build

safelist सेक्शन का उपयोग Tailwind CSS को बताने के लिए किया जाता है कि कौन सी वर्गों को सीएसएस फ़ाइल में शामिल करना है darkMode सेक्शन का उपयोग Tailwind CSS को dark mode वर्गों का प्रयोग करने के लिए बताने के लिए किया जाता है theme सेक्शन का उपयोग Tailwind CSS के विषयवस्तु को कॉन्फ़िगर करने के लिए किया जाता है plugins सेक्शन का उपयोग आप अपने परियोजना में उपयोग कर रहे हैं प्लगइनों को शामिल करने के लिए किया जाता है. यह तब Tailwind द्वारा सीएसएस फ़ाइल को sepcified in के रूप में कम्पाइल करने के लिये प्रयोग किया गया है

"buildM SK1tw": "npx tailwindcss

सीएसप्रोजी

इसका अंतिम भाग स्वयं CSProj फ़ाइल में है. इसमें बन्द करने से ठीक पहले एक खंड शामिल है <Project> टैग:

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

जो जैसा कि आप देख सकते हैं प्रत्येक परियोजना में सीएसएस पुनः निर्माण करने के लिए बिल्ड स्क्रिप्ट को निर्दिष्ट करता है