Tailwind CSS menyediakan berbagai kelas CSS pratondol yang dapat digunakan untuk mengatur tampilan elemen HTML. Beberapa di antaranya adalah:

Layout:

• .flex : untuk mengubah elemen menjadi flex container
• .inline-flex : untuk mengubah elemen menjadi inline flex container
• .grid : untuk mengubah elemen menjadi grid container
• .inline-grid : untuk mengubah elemen menjadi inline grid container
• .items-center : untuk mengatur posisi item pada flex atau grid container ke tengah
• .justify-center : untuk mengatur posisi item pada flex atau grid container ke tengah horizontal
• .content-center : untuk mengatur posisi konten pada flex atau grid container ke tengah
• .h-screen : untuk mengatur elemen menjadi full height dari layar
• .w-screen : untuk mengatur elemen menjadi full width dari layar

Text:

• .text-xs : untuk mengatur ukuran font menjadi x-small
• .text-sm : untuk mengatur ukuran font menjadi small
• .text-base : untuk mengatur ukuran font menjadi base
• .text-lg : untuk mengatur ukuran font menjadi large
• .text-xl : untuk mengatur ukuran font menjadi x-large
• .text-2xl : untuk mengatur ukuran font menjadi 2x large
• .text-3xl : untuk mengatur ukuran font menjadi 3x large
• .text-4xl : untuk mengatur ukuran font menjadi 4x large
• .text-5xl : untuk mengatur ukuran font menjadi 5x large
• .text-center : untuk mengatur posisi teks menjadi tengah
• .text-right : untuk mengatur posisi teks menjadi kanan
• .text-left : untuk mengatur posisi teks menjadi kiri
• .text-red-500 : untuk memberikan warna merah pada text
• .text-green-500 : untuk memberikan warna hijau pada text
• .text-blue-500 : untuk memberikan warna biru pada text
• .font-medium : untuk mengubah font menjadi medium
• .font-normal : untuk mengubah font menjadi normal
• .font-bold : untuk mengubah font menjadi bold

Background:

• .bg-red-500 : untuk memberikan warna merah pada background
• .bg-green-500 : untuk memberikan warna hijau pada background
• .bg-blue-500 : untuk memberikan warna biru pada background
• .bg-gray-300 : untuk memberikan warna abu-abu pada background

Spacing:

• .p-0 : untuk memberikan padding sebesar 0
• .p-1 : untuk memberikan padding sebesar 0.25rem
• .p-2 : untuk memberikan padding sebesar 0.5rem
• .p-3 : untuk memberikan padding sebesar 0.75rem
• .p-4 : untuk memberikan padding sebesar 1rem
• .p-6 : untuk memberikan padding sebesar 1.5rem
• .p-8 : untuk memberikan padding sebesar 2rem
• .p-12 : untuk memberikan padding sebesar 3rem
• .p-16 : untuk memberikan padding sebesar 4rem
• .p-20 : untuk memberikan padding sebesar 5rem
• .px-0 : untuk memberikan padding horizontal sebesar 0
• .px-1 : untuk memberikan padding horizontal sebesar 0.25rem
• .py-0 : untuk memberikan padding vertical sebesar 0
• .py-1 : untuk memberikan padding vertical sebesar 0.25rem
• .m-0 : untuk memberikan margin sebesar 0
• .m-1 : untuk memberikan margin sebesar 0.25rem
• .m-2 : untuk memberikan margin sebesar 0.5rem
• .m-3 : untuk memberikan margin sebesar 0.75rem
• .m-4 : untuk memberikan margin sebesar 1rem
• .m-6 : untuk memberikan margin sebesar 1.5rem
• .m-8 : untuk memberikan margin sebesar 2rem
• .m-12 : untuk memberikan margin sebesar 3rem
• .m-16 : untuk memberikan margin sebesar 4rem
• .m-20 : untuk memberikan margin sebesar 5rem
• .mx-0 : untuk memberikan margin horizontal sebesar 0
• .mx-1 : untuk memberikan margin horizontal sebesar 0.25rem
• .my-0 : untuk memberikan margin vertical sebesar 0
• .my-1 : untuk memberikan margin vertical sebesar 0.25rem

Border:

• .border : untuk memberikan border pada elemen
• .border-t-2 : untuk menambahkan border pada atas elemen dengan lebar 2px
• .border-r-2 : untuk menambahkan border pada kanan elemen dengan lebar 2px
• .border-b-2 : untuk menambahkan border pada bawah elemen dengan lebar 2px
• .border-l-2 : untuk menambahkan border pada kiri elemen dengan lebar 2px
• .border-t-0 : untuk menghilangkan border pada bagian atas elemen
• .border-r-0 : untuk menghilangkan border pada bagian kanan elemen
• .border-b-0 : untuk menghilangkan border pada bagian bawah elemen
• .border-l-0 : untuk menghilangkan border pada bagian kiri elemen
• .border-red-500 : untuk memberikan warna merah pada border elemen
• .border-green-500 : untuk memberikan warna hijau pada border elemen
• .border-blue-500 : untuk memberikan warna biru pada border elemen
• .border-2 : untuk memberikan border sebesar 2px
• .rounded : untuk memberikan border radius pada elemen

Grid:

• .col-span-1 : untuk mengatur jumlah kolom yang digunakan oleh elemen pada grid container
• .row-span-1 : untuk mengatur jumlah baris yang digunakan oleh elemen pada grid container
• .col-start-1 : untuk mengatur posisi kolom awal elemen pada grid container
• .row-start-1 : untuk mengatur posisi baris awal elemen pada grid container
• .col-end-auto : untuk mengatur posisi kolom akhir elemen pada grid container menjadi auto
• .row-end-auto : untuk mengatur posisi baris akhir elemen pada grid container menjadi auto
• .grid-cols-1 : untuk mengatur jumlah kolom pada grid container
• .grid-rows-1 : untuk mengatur jumlah baris pada grid container

Flex:

• .flex-row : untuk mengatur arah flex container menjadi row
• .flex-col : untuk mengatur arah flex container menjadi column
• .flex-wrap : untuk mengatur flex container untuk membungkus item
• .flex-no-wrap : untuk mengatur flex container untuk tidak membungkus item
• .justify-start : untuk mengatur posisi item pada flex container ke kiri
• .justify-end : untuk mengatur posisi item pada flex container ke kanan
• .justify-between : untuk mengatur posisi item pada flex container untuk ditempatkan dengan jarak yang sama antara item
• .justify-center : untuk mengatur posisi item pada flex container untuk ditempatkan di tengah
• .justify-around : untuk mengatur posisi item pada flex container untuk ditempatkan dengan jarak yang sama di sekitar item
• .items-start : untuk mengatur posisi item pada flex container ke atas
• .items-end : untuk mengatur posisi item pada flex container ke bawah
• .items-center : untuk mengatur posisi item pada flex container ke tengah
• .items-baseline : untuk mengatur posisi item pada flex container berdasarkan baseline
• .content-center : untuk mengatur posisi content pada flex container ke tengah
• .content-start : untuk mengatur posisi content pada flex container ke atas
• .content-end : untuk mengatur posisi content pada flex container ke bawah
• .self-auto : untuk mengatur posisi diri elemen pada flex container menjadi auto
• .self-start : untuk mengatur posisi diri elemen pada flex container ke atas
• .self-end : untuk mengatur posisi diri elemen pada flex container ke bawah

Margin dan padding:

• .pl-2 : untuk menambahkan padding pada kiri elemen dengan ukuran 2px
• .mt-2 : untuk menambahkan margin pada atas elemen dengan ukuran 2px
• .mr-2 : untuk menambahkan margin pada kanan elemen dengan ukuran 2px
• .mb-2 : untuk menambahkan margin pada bawah elemen dengan ukuran 2px
• .ml-2 : untuk menambahkan margin pada kiri elemen dengan ukuran 2px
• .pt-2 : untuk menambahkan padding pada atas elemen dengan ukuran 2px
• .pr-2 : untuk menambahkan padding pada kanan elemen dengan ukuran 2px
• .pb-2 : untuk menambahkan padding pada bawah elemen dengan ukuran 2px

Itu hanya beberapa contoh class yang dapat digunakan dalam Tailwind CSS. Ada banyak lagi class yang dapat digunakan untuk menyesuaikan tampilan website.