Menambah CSS Tailwind ke tema WordPress yang baru dan sedia ada

Sejak saya mula membuat laman web WordPress, dalam masa kira-kira 15 tahun, tiada apa yang mempunyai kesan yang lebih besar (dan jurang yang besar) tentang bagaimana produktif saya dan berapa banyak yang saya nikmati dengan pembangunan front-end.

Apabila saya mula menggunakan Tailwind, terdapat repositori parti pertama di GitHub yang menggambarkan cara menggunakan Tailwind di WordPress. Repositori belum dikemas kini sejak 2019. Tetapi kekurangan kemas kini tidak menggambarkan kepraktisan tailwind untuk pemaju WordPress. Dengan mempunyai kerja Tailwind sebagai yang terbaik sementara masih WordPress adalah bahagian terbaik dari kedua -dua platform dan membina laman web moden dalam masa yang kurang.

Contoh tetapan minimum dalam artikel ini direka untuk mengemas kini repositori tetapan asal dan diubahsuai untuk bersesuaian dengan versi terkini Tailwind dan WordPress. Pendekatan ini boleh diperluaskan kepada pelbagai tema WordPress, dari tema lalai yang diperoleh kepada yang tersuai sepenuhnya.

Mengapa Pemaju WordPress Harus Mengikuti Tailwind

Sebelum kita membincangkan tetapan, ia patut dikaji semula bagaimana kerja -kerja Tailwind dan apa yang dimaksudkan dalam persekitaran WordPress.

Tailwind membolehkan anda gaya elemen HTML dengan kelas utiliti yang sedia ada, menghapuskan keperluan untuk menulis kebanyakan atau semua CSS laman web anda sendiri. (Fikirkan tentang kelas seperti hidden untuk display: hidden atau uppercase untuk text-transform: uppercase .) Jika anda telah menggunakan rangka kerja seperti bootstrap dan asas pada masa lalu, perbezaan terbesar yang anda akan dapati di CSS tailwind adalah kaedah slate kosong dan ciri ringan CSS hanya termasuk reset CSS. Ciri-ciri ini membolehkan laman web yang sangat dioptimumkan tanpa menolak pemaju ke arah rangka kerja estetika itu sendiri.

Selain itu, tidak seperti banyak kerangka CSS yang lain, "standard" dibina untuk memuatkan CSS tailwind dari CDN sedia ada tidak dapat dilakukan. Fail CSS yang dihasilkan akan terlalu besar kerana semua kelas utiliti termasuk. Tailwind menyediakan "bermain CDN", tetapi ia tidak digunakan dalam persekitaran pengeluaran kerana ia dapat mengurangkan kelebihan prestasi Tailwind. (Walau bagaimanapun, ia benar -benar berguna jika anda ingin melakukan prototaip cepat atau sebaliknya bereksperimen dengan tailwind tanpa memasangnya atau menyediakan proses binaan.)

Ini memerlukan menggunakan proses membina Tailwind untuk membuat subset kelas utiliti kerangka khusus untuk projek anda, menjadikannya sangat penting untuk memahami bagaimana Tailwind memutuskan kelas utiliti yang dimasukkan dan bagaimana proses ini mempengaruhi penggunaan kelas utiliti dalam editor WordPress.

Akhirnya, preflight agresif Tailwind (versi CSS Reset) bermakna bahawa beberapa bahagian WordPress tidak sesuai dengan kerangka dengan tetapan lalai.

Mari kita lihat apa aspek tailwind berfungsi dengan baik di WordPress.

Aspek Tailwind dan WordPress bekerjasama

Agar Tailwind berjalan dengan baik tanpa banyak penyesuaian, ia perlu bertindak sebagai CSS utama untuk halaman tertentu;

Sebagai contoh, jika anda membina plugin WordPress dan perlu memasukkan CSS front-end, maka Preflight Tailwind akan bertentangan secara langsung dengan tema aktif. Begitu juga, jika anda perlu gaya kawasan admin WordPress (luaran kepada editor), gaya kawasan pengurusan sendiri boleh ditimpa.

Terdapat beberapa cara untuk menyelesaikan kedua -dua masalah ini: anda boleh melumpuhkan preflight dan awalan semua kelas utiliti, atau anda boleh menambah ruang nama untuk semua pemilih menggunakan postcss. Sama ada cara, konfigurasi dan aliran kerja anda akan menjadi lebih kompleks.

Walau bagaimanapun, jika anda membina tema, Tailwind boleh digunakan secara langsung. Saya telah berjaya mencipta tema tersuai menggunakan editor klasik dan editor blok, dan saya percaya bahawa sebagai penyuntingan di seluruh tapak matang, terdapat banyak ciri penyuntingan di seluruh tapak yang berfungsi dengan baik dengan Tailwind.

Dalam catatan blognya, "Editor Gutenberg Site-Wide tidak perlu lengkap," Tammie Lister menerangkan editor di seluruh tapak sebagai set ciri mandiri yang boleh sebahagiannya atau diterima sepenuhnya. Ciri-ciri gaya global untuk penyuntingan tapak tidak mungkin berfungsi dengan Tailwind, tetapi banyak ciri lain mungkin.

SO: Anda sedang membina tema, Tailwind dipasang dan dikonfigurasi, dan anda menambah kelas utiliti dengan senyuman. Tetapi adakah kelas utiliti ini berfungsi dalam editor WordPress?

Melalui perancangan, anda boleh! Kelas utiliti boleh didapati di editor selagi anda memutuskan terlebih dahulu kelas utiliti yang hendak digunakan. Anda tidak boleh membuka editor dan menggunakan mana-mana dan semua kelas utiliti Tailwind;

Terdapat banyak cara untuk melakukan ini: anda boleh membuat senarai selamat dalam fail konfigurasi tailwind;

Menentukan lebih awal daripada kelas editor tidak pernah menjadi penghalang untuk bekerja untuk saya, tetapi ini masih paling banyak yang saya telah ditanya mengenai hubungan antara Tailwind dan WordPress.

Tema WordPress Minimum dengan Integrasi CSS Tailwind yang minimum

Mari kita mulakan dengan tema asas WordPress yang mungkin. Hanya ada dua fail yang diperlukan:

• style.css
• index.php

Kami akan menggunakan tailwind untuk menghasilkan gaya.css. Untuk index.php, mari kita mulakan dengan sesuatu yang mudah:

  Php
/**
 * Fail templat utama.
 *
 * Ini adalah fail templat paling generik dalam tema WordPress
 * dan salah satu daripada dua fail yang diperlukan untuk tema (yang lain adalah gaya.css).
 * Ia digunakan untuk memaparkan halaman apabila tidak ada yang lebih spesifik yang sesuai dengan pertanyaan.
 * Contohnya, ia menyatukan halaman rumah apabila tiada fail home.php wujud.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarky/
 *
 * @package WordPress
 * @subpackage Twenty_twenty_one
 * @Since Twenty Twenty-One 1.0
 */

get_header ();
?>

<main id="site-content" role="main">

     Php
    jika (have_posts ()) {

        sementara (have_posts ()) {
            the_post ();

            get_template_part ('Templat-bahagian/Kandungan', get_post_type ());

        }

    } else {

        get_template_part ('Templat-bahagian/Kandungan', 'Tiada');

    }
    ?>

</main>

 php get_footer ();

Terdapat banyak perkara yang perlu dilakukan oleh WordPress, dan kod di atas tidak melakukannya - seperti penomboran, pasca kecil, menggunakan elemen pautan dan bukannya beratur stylesheets, dan lain -lain - tetapi itu cukup untuk menunjukkan jawatan dan ujian jika Tailwind berfungsi seperti yang diharapkan.

Dari segi tailwind, kita memerlukan tiga fail:

• Package.json
• Tailwind.config.js
• Fail input TailWind

Anda memerlukan NPM sebelum kami meneruskan. Jika anda tidak digunakan untuk menggunakannya, kami mempunyai panduan untuk memulakan dengan NPM, yang merupakan tempat yang bagus untuk bermula!

Oleh kerana tiada fail pakej.json lagi, kami akan membuat fail JSON kosong dalam folder yang sama seperti index.php dengan menjalankan arahan berikut di terminal:

 echo {}> ./package.json

Dengan fail ini, kita boleh memasang Tailwind:

 NPM Pasang Tailwindcss--Save-Dev

Dan menjana fail konfigurasi tailwind kami:

 npx tailwindcss init

Dalam fail tailwind.config.js kami, kami hanya perlu memberitahu Tailwind untuk mencari kelas utiliti dalam fail PHP kami:

 modul.exports = {
  Kandungan: ["./**/*.php"],
  Tema: {
    extend: {},,
  },
  Plugin: [],
}

Jika tema kami menggunakan komposer, kami ingin mengabaikan direktori vendor, yang boleh dilakukan dengan menambahkan sesuatu seperti "! **/vendor/**" ke array kandungan. Walau bagaimanapun, jika semua fail PHP adalah sebahagian daripada tema, di atas akan berfungsi!

Kita boleh menamakan fail input apa sahaja nama yang kita mahukan. Mari buat fail yang dipanggil Tailwind.css dan tambahkan yang berikut:

 /*!
Nama Tema: WordPress Tailwind
*/

@TailWind Base;
@TailWind komponen;
@TailWind Utilities;

Anotasi di bahagian atas diperlukan untuk WordPress untuk mengenali tema;

Itu sahaja! Kita kini boleh menjalankan arahan berikut:

 NPX Tailwindcss -I ./Tailwind.css-O ./style.css -Watch

Ini memberitahu Tailwind CLI untuk menggunakan tailwind.css sebagai fail input untuk menghasilkan fail gaya.css kami. Bendera Watch akan terus membina semula fail Style.css apabila menambah atau mengeluarkan kelas utiliti dari mana -mana fail PHP dalam repositori projek.

Ia semudah tema WordPress berkuasa tailwind, tetapi tidak mungkin ia adalah sesuatu yang anda mahu untuk digunakan ke persekitaran pengeluaran. Oleh itu, mari kita bincangkan beberapa laluan ke topik siap pengeluaran.

Tambahkan TailWindcss ke tema yang ada

Terdapat dua sebab mengapa anda mungkin mahu menambah CSS tailwind ke tema sedia ada yang sudah mempunyai CSS asli sendiri:

• Eksperimen Menambah Komponen Tailwind ke Tema Gaya
• Tukar tema dari CSS asli ke tailwind

Kami akan menunjukkan ini dengan memasang Tailwind dalam dua puluh dua puluh satu (tema lalai untuk WordPress). (Kenapa tidak dua puluh dua orang? Tema lalai WordPress terkini direka untuk menunjukkan penyuntingan tapak penuh dan tidak sesuai untuk integrasi tailwind.)

Pertama, jika tema tidak dipasang dalam persekitaran pembangunan anda, anda harus memuat turun dan memasangnya. Selepas itu, kita hanya perlu mengikuti langkah -langkah berikut:

• Navigasi ke folder tema di terminal.
• Kerana dua puluh dua orang sudah mempunyai fail pakej.json sendiri, anda boleh memasang Tailwind tanpa membuat fail baru:

 NPM Pasang Tailwindcss--Save-Dev

• Tambahkan fail tailwind.config.json anda:

 npx tailwindcss init

• Kemas kini fail tailwind.config.json anda ke fail yang sama seperti di bahagian sebelumnya.
• Salin dua puluh dua puluh satu fail gaya.css sedia ada ke tailwind.css.

Sekarang kita perlu menambah tiga arahan @TailWind ke fail tailwind.css. Saya cadangkan anda membina fail tailwind.css seperti berikut:

 /* Header fail tema WordPress ada di sini. */

@TailWind Base;

/* Semua CSS yang ada ada di sini. */

@TailWind komponen;
@TailWind Utilities;

Meletakkan akar umbi sejurus selepas tajuk topik memastikan WordPress terus mengesan topik anda, sambil memastikan bahawa reset CSS Tailwind muncul dalam fail sedini mungkin.

Semua CSS yang sedia ada terletak di belakang lapisan asas, memastikan gaya -gaya ini lebih penting daripada diset semula.

Akhirnya, lapisan komponen dan utiliti segera diikuti, jadi mereka boleh menjadi keutamaan ke atas sebarang perisytiharan CSS dengan kekhususan yang sama.

Sekarang, seperti topik minimum kami, kami akan menjalankan arahan berikut:

 NPX Tailwindcss -I ./Tailwind.css-O ./style.css -Watch

Sekarang bahawa fail gaya baru anda dijana setiap kali anda menukar fail PHP, anda harus menyemak perbezaan rendering halus antara tema yang diubah suai dan tema asal. Ini disebabkan oleh reset CSS Tailwind, yang sedikit lebih teliti daripada beberapa tema yang mungkin diharapkan. Untuk dua puluh dua puluh satu, satu-satunya pengubahsuaian yang saya buat ialah menambah baris teks-dekorasi: menggariskan ke elemen A.

Selepas menyelesaikan masalah rendering, mari tambahkan komponen spanduk header dari Tailwind UI (perpustakaan komponen pihak pertama Tailwind). Salin kod dari laman web UI Tailwind dan tampalnya selepas pautan "melompat ke kandungan" di header.php:

sangat bagus! Oleh kerana kami kini akan menggunakan kelas utiliti untuk menimpa beberapa kelas kekhususan yang lebih tinggi yang dibina ke dalam topik ini, kami akan menambah garis ke fail tailwind.config.js:

 modul.exports = {
  Penting: benar,
  Kandungan: ["./**/*.php"],
  Tema: {
    extend: {},,
  },
  Plugin: [],
}

Ini menandakan semua utiliti CSS tailwind sebagai penting supaya mereka dapat menimpa kelas sedia ada dengan kekhususan yang lebih tinggi. (Saya tidak pernah menetapkan penting untuk benar dalam persekitaran pengeluaran, tetapi jika saya menukar laman web dari CSS asli ke tailwind, saya hampir pasti melakukannya.)

Dengan menambahkan kelas tidak pantas untuk belajar lebih banyak pautan dan menambah BG-Transparent dan Border-0 ke butang Tutup, kami selesai:

Ia kelihatan agak keras untuk melihat komponen UI Tailwind bergabung ke dalam tema lalai WordPress, tetapi ini adalah demonstrasi yang bagus dari komponen tailwind dan mudah alih yang wujud.

Mula dari awal

Jika anda menggunakan Tailwind untuk membuat topik baru, proses anda akan sangat mirip dengan contoh minimum di atas. Daripada menjalankan Tailwind CLI secara langsung dari baris arahan, anda mungkin ingin membuat skrip NPM berasingan untuk pembangunan dan pengeluaran membina dan memantau perubahan. Anda juga mungkin ingin membuat binaan berasingan untuk editor WordPress.

Jika anda sedang mencari titik permulaan di luar contoh terkecil di atas - tetapi tidak melebihi tahap yang ia sendiri mempunyai gaya yang benar -benar - saya telah mencipta penjana tema WordPress yang dioptimumkan oleh Tailwind yang diilhamkan oleh garis bawah (_s), sekali tema pelancaran WordPress kanonik. Dinamakan _tw, ini adalah permulaan yang cepat yang saya harap apabila saya mula menggunakan Tailwind dengan WordPress. Ia masih merupakan langkah pertama dalam semua projek pelanggan saya.

Sekiranya anda bersedia untuk menyimpang dari struktur tema WordPress yang tipikal dan tambahkan templat bilah Laravel ke toolkit anda, Sage adalah pilihan yang hebat dan mereka mempunyai panduan persediaan untuk Tailwind untuk membantu anda memulakan.

Tidak kira bagaimana anda memilih untuk memulakan, saya menggalakkan anda untuk mengambil sedikit masa untuk menyesuaikan diri dengan CSS Tailwind dan menggunakan kelas utiliti untuk gaya HTML Dokumen: Ia mungkin berasa tidak biasa pada mulanya, tetapi anda akan mendapati diri anda mengambil lebih banyak kerja pelanggan daripada yang anda gunakan kerana anda membina laman web anda lebih cepat daripada yang digunakan - dan mudah -mudahan, seperti saya, lebih menyeronokkan dalam melakukannya.

Atas ialah kandungan terperinci Menambah CSS Tailwind ke tema WordPress yang baru dan sedia ada. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!