Tailwind CSS menggunakan banyak aturan khusus CSS seperti @tailwind, @apply, dan @screen, dan di banyak editor hal ini dapat memicu peringatan atau error saat aturan ini tidak dikenali
Solusi untuk ini hampir selalu memasang plugin untuk editor/IDE Anda untuk dukungan bahasa PostCSS daripada CSS biasa
Jika Anda menggunakan Kode VS, plugin Tailwind CSS IntelliSense resmi kami menyertakan mode bahasa Tailwind CSS khusus yang mendukung semua aturan dan fungsi khusus yang digunakan Tailwind
Dalam beberapa kasus, Anda mungkin perlu menonaktifkan linting/validasi CSS asli jika editor Anda sangat ketat tentang sintaks yang diharapkan dalam file CSS Anda
IntelliSense untuk Kode VS
Ekstensi Tailwind CSS IntelliSense resmi untuk Visual Studio Code menyempurnakan pengalaman pengembangan Tailwind dengan menyediakan fitur lanjutan seperti pelengkapan otomatis, penyorotan sintaksis, dan linting kepada pengguna
- Pelengkapan otomatis. Saran cerdas untuk nama kelas, serta fungsi dan arahan CSS
- Linting. Menyoroti kesalahan dan potensi bug di CSS dan markup Anda
- Arahkan Pratinjau. Lihat CSS lengkap untuk nama kelas Tailwind dengan mengarahkan kursor ke atasnya
- Penyorotan Sintaks. Memberikan definisi sintaks sehingga fitur Tailwind disorot dengan benar
Lihat proyek di GitHub untuk mempelajari lebih lanjut, atau tambahkan ke Visual Studio Code untuk memulai sekarang
Penyortiran kelas otomatis dengan Prettier
Kami mengelola plugin Prettier resmi untuk Tailwind CSS yang secara otomatis mengurutkan kelas Anda mengikuti
Ia bekerja mulus dengan konfigurasi Tailwind kustom, dan karena ini hanya plugin Prettier, ia bekerja di mana pun Prettier bekerja — termasuk setiap editor dan IDE populer, dan tentu saja di baris perintah
Lihat plugin di GitHub, pelajari lebih lanjut dan mulai
IDE JetBrains
IDE JetBrains seperti WebStorm, PhpStorm, dan lainnya menyertakan dukungan untuk penyelesaian Tailwind CSS yang cerdas di HTML Anda dan saat menggunakan @apply
Jika Anda memilih untuk menggunakan perpustakaan eksternal seperti MudBlazor untuk proyek Blazor Anda, dan menggunakan Visual Studio 2022, Anda mungkin menemukan bahwa Anda kehilangan segala jenis intellisense untuk gaya yang dibundel (yang disertakan dengan perpustakaan)
Mengambil MudBlazor secara khusus, itu termasuk beberapa kelas utilitas berguna untuk mengatur hal-hal seperti margin dan padding
Masalahnya adalah, jika Anda menjalankan proyek MudBlazor baru kemudian mulai mencoba menggunakan kelas-kelas ini di komponen Blazor Anda, Anda akan menebak apa yang tersedia karena tidak ada intellisense untuk mereka.
Ambil kode ini misalnya…
<div class="d-flex"> <div class="blue white-text pa-4">a</div> <div class="flex-grow-1 red white-text pa-4">b</div> </div>
Di sini kami menggunakan kelas seperti pa-4 untuk menyetel padding di semua sisi ke 4 (yaitu , jika Anda tertarik)
Cobalah untuk mengerjakan kode ini di VS2022 (pada saat penulisan) dan Anda harus melakukannya tanpa Intellisense
Masalah
Setelah menjelajahi masalah ini selama beberapa jam, ternyata itu adalah batasan yang diketahui dari editor Razor baru (yang dikirimkan dengan VS 2022)
Saat Anda menggunakan MudBlazor (atau pustaka lain), Anda biasanya menambahkannya melalui paket Nuget
Anda kemudian dapat mereferensikan aset statis mereka (file CSS, JavaScript dll) melalui URL yang dimulai dengan _content/
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" /> _
Di balik layar, saat Anda membuat aplikasi (selama pengembangan). NET mencari kumpulan web statis. runtime. json di direktori output build proyek Anda
Sebagai contoh…
\bin\Debug\net6.0\<project>.staticwebassets.runtime.jsonFile JSON ini kemudian mengarahkan. NET ke lokasi aset statis apa pun yang direferensikan oleh proyek
Dalam kasus proyek yang mereferensikan MudBlazor, file pemetaan kemungkinan akan menyertakan entri yang menunjuk ke Nuget Cache, seperti ini dari proyek saya
"D. \. nuget\mudblazor\6. 0. 2\basset statis\”
Saat proyek ini berjalan (selama pengembangan). NET akan mengalihkan semua permintaan untuk file MudBlazor CSS dan JavaScript ke cache Nuget (sesuai lokasi yang ditentukan dalam file pemetaan)
Perhatikan, ini hanya selama pengembangan
Saat Anda membuat aplikasi untuk produksi, aset dikumpulkan dan didistribusikan sebagai bagian dari keluaran yang dipublikasikan
Inilah masalah Intellisense di VS… Editor pisau cukur baru belum memiliki dukungan untuk mengisi Intellisense berdasarkan aset statis yang ditautkan dari paket Nuget dengan cara ini
Seperti yang dikonfirmasi oleh MS di sini
Solusinya
Jadi ini menjengkelkan. Jika Anda membuat lembar gaya Anda sendiri dan meletakkannya di folder wwwroot proyek Anda, Anda akan mendapatkan intellisense, tetapi tidak jika Anda menggunakan paket melalui NuGet (seperti MudBlazor)
Cukup aman untuk menganggap Microsoft akan merilis pembaruan yang memperbaikinya di beberapa titik, tetapi sementara itu ada solusinya
Jika Anda dapat mengambil file dari cache NuGet dan menyalinnya ke folder wwwroot Anda, Anda mungkin dapat memiliki kue MudBlazor dan memakannya juga. 🙂
Tentu saja, Anda bisa melakukannya secara manual;
Tapi kemudian Anda harus melakukan ini setiap kali memperbarui MudBlazor, atau mengkloning proyek Anda ke mesin baru
Opsi yang lebih baik adalah mengintegrasikannya ke dalam proses pembangunan
Ternyata itu mungkin dengan sedikit bantuan dari MSBuild
Inilah tugas MSBuild yang dapat Anda tambahkan ke proyek Anda. csproj yang mengotomatiskan penyalinan file statis ke wwwroot
<Target Name="CollectMudBlazorStaticAssets" DependsOnTargets="ResolveStaticWebAssetsInputs" AfterTargets="Build" Condition=" '$(Configuration)' == 'Debug' "> <Copy SourceFiles="%(StaticWebAsset.Identity)" DestinationFolder="wwwroot/temp" Condition="$([System.String]::Copy(%(StaticWebAsset.Identity)).Contains('mudblazor'))" /> </Target>
Kelihatannya agak aneh (maksud saya, ini adalah MSBuild, dan jika Anda tidak menghabiskan banyak waktu di sini, sepertinya selalu sedikit asing) tetapi ini berjalan selama pengembangan (bukan untuk pembuatan produksi) dan mengambil keluaran dari
ResolveStaticWebAssetsInputs menempatkan semua file statis untuk proyek, dan merupakan Tugas Microsoft bawaan yang berjalan sebagai bagian dari proses pembuatan biasa
Panggilan ke <Copy SourceFiles= … /> beralih ke file statis ini, mencari apa pun yang berisi kata mudblazor, dan menyalinnya ke folder wwwroot/temp proyek
Dengan ini, ketika Anda membangun kembali proyek Anda, Anda akan menemukan aset statis MudBlazor di <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" /> 0 dan Intellisense akan hidup kembali
Peretasan?
Saya cukup yakin kode ini termasuk dalam wilayah "retas", dan hampir pasti akan memperlambat pengembangan Anda jika Anda memiliki banyak aset statis…
Tapi itu membuat intellisense berfungsi sampai Microsoft merilis sesuatu yang lebih resmi, jadi mungkin layak ditambahkan ke file csproj proyek Anda 🙂
Kode sumber, tutorial langkah demi langkah, video, dan lainnya
Saya telah mengumpulkan banyak sekali tutorial yang berguna, kode sumber untuk artikel (seperti ini) dan seri video mini untuk membantu Anda melewati semua kebisingan dan membangun ASP yang lebih baik. Aplikasi web NET, lebih cepat
Letakkan email Anda di kotak di bawah untuk mendapatkan posting baru terlebih dahulu, dan akses instan ke 'vault'
Kirimkan aku kunci lemari besi
saya menghargai privasi surat elektronik Anda. Berhenti berlangganan dengan satu klik
Satu langkah terakhir
Periksa kotak masuk Anda dan klik tautan di email untuk menyelesaikan prosesnya
Terima kasih telah menjadi pelanggan
Tahukah kamu?