Back to "Tailwind CSS & ASP.NET Core"

This is a viewer only at the moment see the article on how this works.

To update the preview hit Ctrl-Alt-R (or ⌘-Alt-R on Mac) or Enter to refresh. The Save icon lets you save the markdown file to disk

# Tailwind CSS & ASP.NET Core

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

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

## संस्थापन

Bootstrap की तुलना में एक बड़ा त्रुटि यह है कि Tailwind एक 'drop नहीं है। [यह](https://tailwindcss.com/docs/installation)).

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

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

### पैकेज

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

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

### टेलविंड.config.js

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

इस फ़ाइल का उपयोग 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> ` टैग:

```xml

```

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

This is a preview from the server running through my markdig pipeline

ASP.NET Tailwind

Tailwind CSS & ASP.NET Core

Tuesday, 30 July 2024

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

संस्थापन

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>