प्रौद्योगिकी साझेदारी

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

सामग्रीसूची

1. परिभाषा

2. परमाणुकरणसाधनम्

२.१、पुच्छवायुः

2.1.1.PostCss प्लग-इनरूपेण संस्थापनं कुर्वन्तु

2.1.2.PostCss संस्थापनस्य उपरि न निर्भरं भवति

2.1.3.मूलविन्यासस्य परिवर्तनं कुर्वन्तु

२.२、उनोक्स्स्

3. लाभहानिः च

३.१ लाभाः

3.2.हानिः

1. परिभाषा

परिभाषा : स्मरणशास्त्रस्य श्रृङ्खलायाः उपयोगेन, २.शैल्याः प्रतिनिधित्वार्थं वर्गनामानां उपयोगं कुर्वन्तु。

2. परमाणुकरणसाधनम्

२.१、पुच्छवायुः

अनुवादितम् अस्ति"पुच्छवायुः" ।इति अर्थः ।

आधिकारिकजालस्थलम् : १.संस्थापनम् - Tailwind CSS

2.1.1.PostCss प्लग-इनरूपेण संस्थापनं कुर्वन्तु

यदि सरलं पुटम् अस्ति :

(1), आरंभीकरण: npm init -y

(२) ३ प्लग-इन् संस्थापयन्तु : १.npm i tailwindcss postcss-cli स्वउपसर्ग -D

(3) सम्बन्धितविन्याससञ्चिकाः जनयन्तु: npx tailwind init -p

(4) फोल्डर् मध्ये नूतनं src तथा sc इत्यस्य अधः नूतनं style.css रचयन्तु ।

@tailwind base;
@tailwind components;
@tailwind utilities;

(5) package.json इत्यस्मिन् "scripts" इत्यस्य सामग्रीं परिवर्तयन्तु: "build": "postcss src/style.css -o dist/tailwind.css" इति ।

(6) npm run build सफलस्य अनन्तरं dist/tailwind.css द्रष्टुं शक्नुवन्ति, यस्य अर्थः अस्ति यत् संकलनं सफलम् अस्ति । (टिप्पणी: नोड् संस्करणं 16+ भवितुमर्हति, अन्यथा संकलनदोषः निवेदितः भविष्यति।)

(7) उदाहरणरूपेण index.html गृह्यताम् ।

<link rel="stylesheet" href="tailwind.css">
<div class="text-base p-1 border border-black border-solid"></div>
//==========================等同于==============================
.text-base {
    font-size: 16px;
}
.p-1 {
    padding: 4px;
}
.border {
    border-width: 1px;
}
.border-black {
    border-color: black;
}
.border-solid {
    border-style: solid;
}

शेषं आधिकारिकजालस्थले उपलभ्यते, भवान् स्वयमेव तान् अन्वेष्टुं शक्नोति।

2.1.2.PostCss संस्थापनस्य उपरि न निर्भरं भवति

प्रायः उपरिष्टाद् एव एतौ आदेशपङ्क्तौnpm i tailwindcss स्वयम् उपसर्ग -Dतथाnpx पुच्छवायु initकिञ्चित् परिवर्तनेन सह विन्याससञ्चिकायाः ​​सामग्री "build" भवति: "tailwind build src/style.css -o dist/tailwind.css" ।

2.1.3.मूलविन्यासस्य परिवर्तनं कुर्वन्तु

"text-base" इति उदाहरणरूपेण गृह्यताम् :

सरणीयां द्वौ तत्त्वौ font-size तथा line-height style इति स्तः ।

module.exports = {
  content: [],
  theme: {
    extend: {
        padding: {
            '1': '30px'
        },
        fontSize: {
            'base': ['30px', '2rem']
        }
    },
  },
  plugins: [],
}
//================修改后的p-1和text-base
.p-1 {
    padding:30px;
}
.text-base {
    font-size:30px;
    line-height:2rem;
}

अत्र अत्यधिकं परमाणुवर्गनामानि सन्ति तथा च भवन्तः प्रतिवारं दस्तावेजीकरणं पश्यितुं न शक्नुवन्ति ।पूंछवायु CSS IntelliSenseउत्तरयति।

२.२、उनोक्स्स्

UNO अनुवादितम् अस्ति"संयुक्त राष्ट्रसङ्गठनम्" ।इति अर्थः ।

आधिकारिकजालस्थलम् : १.UnoCSS: तत्क्षणं आग्रहेण Atomic CSS इञ्जिनम्

अत्र अत्यधिकं परमाणुवर्गनामानि सन्ति तथा च भवन्तः प्रतिवारं दस्तावेजीकरणं पश्यितुं न शक्नुवन्ति ।UnoCssवाTo Unocss इतिउत्तरयति।

(१), स्थापना : १.

npm i unocss @ iconify-json/ep @ unocss/पूर्वनिर्धारित-rem-to-px @ unocss/परिवर्तक-निर्देशक -D

@iconify-json/ep ==> इति Element Plus चिह्नपुस्तकालयः अस्ति आइकोन्स्；

@unocss/preset-rem-to-px ==> unocss इत्यनेन सह यत् rem आगच्छति तत् px मध्ये परिवर्तयन्तु;

@unocss/transformer-directives ==>भवन्तः @apply, @screen, विषयकार्यं उपयोक्तुं शक्नुवन्ति

(2)、vite.config.ts: 1.1.

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

(3), सृजति कuno.config.tsप्रलेख:

import presetRemToPx from '@unocss/preset-rem-to-px'
import transformerDirectives from '@unocss/transformer-directives'
import { defineConfig, presetAttributify, presetUno, transformerVariantGroup, presetIcons } from 'unocss'
export default defineConfig({
    presets: [
        presetAttributify(),
        presetUno(),
        presetRemToPx({
            baseFontSize: 4
        }),//eg:mt-1或转换为margin-top:1px
        presetIcons({
            scale: 1.2,
            warn: true
        })//自动引入图标配置
    ],
    transformers: [transformerVariantGroup(), transformerDirectives()],
    rules: [
        // m-1可转换为margin:0.25rem
        // [/^m-(d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
    ],//自定义配置项
    shortcuts: [
        {
            'flex-center': 'flex items-center justify-center',//垂直居中
            'flex-end': 'flex items-center justify-end',//放在最后
            'flex-middle': 'flex items-center',//垂直居中
            'flex-between': 'flex items-center justify-between',//分开两边
            'flex-col-center': 'flex flex-col justify-center',//竖着居中
        }
    ]//自定义属性  一个属性可以对应多个unocss类值
})

(4), main.ts वैश्विक विन्यास:

import 'virtual:uno.css'

(५), प्रयोगः १.

(6) चिह्न अनुप्रयोगः : १.

<div i-ep:dish></div>
<i w110 h100 block i-ep:switch-button></i>

3. लाभहानिः च

३.१ लाभाः

(1). यथा यथा व्यापारः वर्धते, तथैव यथा यथा व्यापारः वर्धते तथा तथा।CSS सञ्चिकायाः ​​आकारस्य वृद्धिः मन्दं भवतिपूर्वमेव;

(2)、HTML संरचनाः कुत्रापि स्थानान्तरयितुं शक्यन्ते, सा एव शैली अपरिवर्तिता एव तिष्ठति;

(3) HTML संरचनायाः सह शैली विलोपिता भविष्यति ।एकत्र लोपितम्；

(4) वर्गस्य नामकरणस्य ऊर्जां रक्षति।

3.2.हानिः

(१) परमाणुवर्गाणां परिभाषार्थं परिश्रमः आवश्यकः (वर्गनाम स्मर्यताम्);

(2)、एचटीएमएलसंरचना प्रफुल्लिता भवति；

(३) दलस्य कार्यं कुर्वन् अन्येषां सदस्यानां संहितानां व्याख्यानार्थं समयः भवति;

परमाणुकरणसाधनं विण्डी...आदीनि च सन्ति, अत्र वयं उपरिष्टाद् द्वयोः विषये ध्यानं दद्मः ।