vue js ដំឡើង tailwindcss

យើងសិក្សា vue js វាគឺជា fron-end នៃបង្កើតវែបសាយកាលពីមុនយើងបានប្រើស្តាយដោយប្រើ css ប៉ុន្តែនៅពេលនេះយើងមកប្រើជាមួយ tailwindcss ដោយចំនួស css វិញដើម្បីឲ្យមានភាពងាយស្រួលការអភិវឌ្ឍន៍នៃវែបសាយឲ្យកាន់តែលឿន។

ខាងក្រោមនេះគឺជារូបភាពដែលយើងបានដំឡើង vue js ហើយប៉ុន្តែវាមិនទានមាន tailwindcss នៅឡើងទេ

ដើម្បីដំឡើង tailwindcss នៅក្នុង vue js នោះយើងត្រូវទៅចូលវែបសាយរបស់ tailwindcss ដើម្បីអំពីការណែនាំរបស់វា

ពេលយើងចូលដំបូងសូមជ្រើសរើស Installation => Framework Guides => ជ្រើសយក Vite => Using vue

ដោយយើងបានដំឡើង vue ខាងលើរួចយើងដំឡើងតាមដំណាក់ដូចខាងក្រោមនេះ

npm install -D tailwindcss postcss autoprefixer

តំឡើង file tailwind configer

npx tailwindcss init -p

បន្ទាប់ចូលដល់លេខបី ដោយយើង copy code ទៅដាក់នៅក្នុង tailwind.config.js

"./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",

ខ្ញុំលុប file base.css និង main.css នៅក្នុង folder assets កុំឲ្យវារញេរញៃ ដោយបង្កើត file ថ្មីមួយដាក់ឈ្មោះថា style.css

copy code ដែលនៅចំណុចលេខ ៤ ទៅដាក់នៅក្នុង file style.css ដែលយើងបានបង្កើត

បន្ទាប់ពីយើងបាន past វារួចសូចចូលទៅក្នុង file main.js ដើម្បី import file style.css យកមកប្រើ

test tailwindcss

ដោយយើង test tailwind នៅក្នុង file app.vue