Skip to content

Instantly share code, notes, and snippets.

@antoniputra

antoniputra/index.html

Created October 24, 2021 09:12
Show Gist options
  • Save antoniputra/59bd1a435a24676177ced2abac19e49e to your computer and use it in GitHub Desktop.
Save antoniputra/59bd1a435a24676177ced2abac19e49e to your computer and use it in GitHub Desktop.
Download ZIP
Cart Reveal Component Tailwind. Demo: https://play.tailwindcss.com/Yov1lzJCeY
Raw
index.html
<section class="tw-relative tw-bg-red-50 tw-h-[900px] tw-p-5 tw-py-0 tw-pr-0">
<div class="tw-bg-yellow-200 tw-h-[1200px]">asdf </div>
<!-- Cart Component -->
<div class="tw-fixed tw-flex tw-flex-col tw-top-0 tw-right-0 md:tw-w-[75%] tw-bg-white tw-py-2 tw-h-screen">
<!-- Title -->
<div class="tw-flex-shrink tw-bg-white tw-flex tw-py-2 tw-border-b tw-px-4">
<span class="tw-flex-1 tw-font-semibold tw-text-lg">Your Cart</span>
<a href="" class="tw-flex-none tw-ml-auto hover:tw-opacity-50">
<svg class="tw-w-6 tw-h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</a>
</div>
<!-- Body -->
<div class="tw-flex-grow tw-overflow-y-auto">
<!-- Product Card Component -->
<div class="tw-flex tw-border-b last:tw-border-b-0 tw-py-3 tw-px-4">
<!-- Col 1 -->
<a href="" class="tw-flex-none tw-mr-2 tw-w-20 tw-h-20 tw-border tw-p-0.5 tw-rounded tw-overflow-hidden hover:tw-opacity-60">
<img src="https://via.placeholder.com/100">
</a>
<!-- Col 2 -->
<div class="tw-flex-1 md:tw-pr-12">
<a href="" class="hover:tw-underline tw-text-sm tw-font-semibold tw-block tw-mb-2 tw-line-clamp-2">
Bactericidal flow air recirculator up to 60 meters sq ORBB 30х1 Gorizont. Lorem ipsum prend jiffie duke derdied kid fir
</a>
<select class="tw-border tw-py-1 tw-px-2 tw-text-sm" name="qty">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div> <!-- Col 2 -->
<!-- Col 3 -->
<div class="tw-flex-none tw-ml-auto tw-text-right">
<div class="tw-flex tw-justify-end tw-mb-4 tw-space-x-3">
<a href="" class="hover:tw-opacity-50">
<svg class="tw-w-5 tw-h-5 md:tw-w-6 md:tw-h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
</a>
<a href="" class="hover:tw-opacity-50">
<svg class="tw-w-5 tw-h-5 md:tw-w-6 md:tw-h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
</a>
</div>
<div class="tw-flex-row md:tw-flex md:tw-items-center md:tw-space-x-2">
<div class="tw-font-semibold">Rp 1.200.000</div>
<div class="tw-text-sm tw-line-through tw-text-gray-500">Rp 1.200.000</div>
</div>
</div> <!-- Col 3 -->
</div> <!-- Product Card Component -->
<!-- Sample Looping -->
<!-- Product Card Component -->
<div class="tw-flex tw-border-b last:tw-border-b-0 tw-py-3 tw-px-4">
<!-- Col 1 -->
<a href="" class="tw-flex-none tw-mr-2 tw-w-20 tw-h-20 tw-border tw-p-0.5 tw-rounded tw-overflow-hidden hover:tw-opacity-60">
<img src="https://via.placeholder.com/100">
</a>
<!-- Col 2 -->
<div class="tw-flex-1 md:tw-pr-12">
<a href="" class="hover:tw-underline tw-text-sm tw-font-semibold tw-block tw-mb-2 tw-line-clamp-2">
Bactericidal flow air recirculator up to 60 meters sq ORBB 30х1 Gorizont. Lorem ipsum prend jiffie duke derdied kid fir
</a>
<select class="tw-border tw-py-1 tw-px-2 tw-text-sm" name="qty">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div> <!-- Col 2 -->
<!-- Col 3 -->
<div class="tw-flex-none tw-ml-auto tw-text-right">
<div class="tw-flex tw-justify-end tw-mb-4 tw-space-x-3">
<a href="" class="hover:tw-opacity-50">
<svg class="tw-w-5 tw-h-5 md:tw-w-6 md:tw-h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
</a>
<a href="" class="hover:tw-opacity-50">
<svg class="tw-w-5 tw-h-5 md:tw-w-6 md:tw-h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
</a>
</div>
<div class="tw-flex-row md:tw-flex md:tw-items-center md:tw-space-x-2">
<div class="tw-font-semibold">Rp 1.200.000</div>
<div class="tw-text-sm tw-line-through tw-text-gray-500">Rp 1.200.000</div>
</div>
</div> <!-- Col 3 -->
</div> <!-- Product Card Component -->
<!-- Sample Looping -->
<div class="tw-bg-gray-50">
<span class="tw-py-6 tw-block tw-font-semibold tw-text-center">
Customers who bought this item also bought
</span>
<!-- Product Card Component Variant 2 -->
<div class="tw-flex tw-border-b last:tw-border-b-0 tw-py-3 tw-px-4">
<!-- Col 1 -->
<a href="" class="tw-flex-none tw-mr-2 tw-w-20 tw-h-20 tw-border tw-p-0.5 tw-rounded tw-overflow-hidden hover:tw-opacity-60">
<img src="https://via.placeholder.com/100">
</a>
<!-- Col 2 -->
<div class="tw-flex-1">
<div class="tw-mb-1">
<a href="" class="tw-font-medium tw-text-sm hover:tw-underline">
Bactericidal flow air recirculator up to 60 meters sq ORBB 30х1 Gorizont 60 meters sq ORBB 30х1 Gorizont
</a>
</div>
<div class="tw-flex tw-items-center">
<div class="tw-flex-1">
<div class="tw-flex tw-mb-1">
<svg class="tw-w-5 tw-h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
<svg class="tw-w-5 tw-h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
<svg class="tw-w-5 tw-h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
<svg class="tw-w-5 tw-h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
<svg class="tw-w-5 tw-h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
</div>
<div class="tw-font-semibold">Rp 700.000</div>
</div>
<div class="tw-flex-none">
<a href="" class="tw-py-1.5 tw-px-5 tw-text-sm tw-bg-blue-500 hover:tw-bg-blue-600 tw-text-white tw-rounded">Add</a>
</div>
</div>
</div>
</div> <!-- Product Card Component Variant 2 -->
<!-- Sample Looping -->
<!-- Product Card Component Variant 2 -->
<div class="tw-flex tw-border-b last:tw-border-b-0 tw-py-3 tw-px-4">
<!-- Col 1 -->
<a href="" class="tw-flex-none tw-mr-2 tw-w-20 tw-h-20 tw-border tw-p-0.5 tw-rounded tw-overflow-hidden hover:tw-opacity-60">
<img src="https://via.placeholder.com/100">
</a>
<!-- Col 2 -->
<div class="tw-flex-1">
<div class="tw-mb-1">
<a href="" class="tw-font-medium tw-text-sm hover:tw-underline">
Bactericidal flow air recirculator up to 60 meters sq ORBB 30х1 Gorizont 60 meters sq ORBB 30х1 Gorizont
</a>
</div>
<div class="tw-flex tw-items-center">
<div class="tw-flex-1">
<div class="tw-flex tw-mb-1">
<svg class="tw-w-5 tw-h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
<svg class="tw-w-5 tw-h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
<svg class="tw-w-5 tw-h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
<svg class="tw-w-5 tw-h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
<svg class="tw-w-5 tw-h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
</div>
<div class="tw-font-semibold">Rp 700.000</div>
</div>
<div class="tw-flex-none">
<a href="" class="tw-py-1.5 tw-px-5 tw-text-sm tw-bg-blue-500 hover:tw-bg-blue-600 tw-text-white tw-rounded">Add</a>
</div>
</div>
</div>
</div> <!-- Product Card Component Variant 2 -->
<!-- Product Card Component Variant 2 -->
<div class="tw-flex tw-border-b last:tw-border-b-0 tw-py-3 tw-px-4">
<!-- Col 1 -->
<a href="" class="tw-flex-none tw-mr-2 tw-w-20 tw-h-20 tw-border tw-p-0.5 tw-rounded tw-overflow-hidden hover:tw-opacity-60">
<img src="https://via.placeholder.com/100">
</a>
<!-- Col 2 -->
<div class="tw-flex-1">
<div class="tw-mb-1">
<a href="" class="tw-font-medium tw-text-sm hover:tw-underline">
Bactericidal flow air recirculator up to 60 meters sq ORBB 30х1 Gorizont 60 meters sq ORBB 30х1 Gorizont
</a>
</div>
<div class="tw-flex tw-items-center">
<div class="tw-flex-1">
<div class="tw-flex tw-mb-1">
<svg class="tw-w-5 tw-h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
<svg class="tw-w-5 tw-h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
<svg class="tw-w-5 tw-h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
<svg class="tw-w-5 tw-h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
<svg class="tw-w-5 tw-h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path></svg>
</div>
<div class="tw-font-semibold">Rp 700.000</div>
</div>
<div class="tw-flex-none">
<a href="" class="tw-py-1.5 tw-px-5 tw-text-sm tw-bg-blue-500 hover:tw-bg-blue-600 tw-text-white tw-rounded">Add</a>
</div>
</div>
</div>
</div> <!-- Product Card Component Variant 2 -->
<!-- Sample Looping -->
</div>
</div> <!-- Body -->
<!-- Footer -->
<div class="tw-flex-shrink tw-py-2 tw-px-4 tw-bg-white tw-border-t">
<div class="tw-flex tw-font-semibold tw-mb-2">
<span class="tw-flex-1">Subtotal (6 items)</span>
<span class="tw-flex-1 tw-text-right">Rp 12.000.000</span>
</div>
<a href="" class="tw-block tw-border tw-rounded tw-bg-blue-500 hover:tw-bg-blue-600 tw-text-white tw-py-2 tw-text-center">
Checkout
</a>
</div> <!-- Footer -->
</div>
</section>
Raw
tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
mode: 'jit',
prefix: 'tw-',
theme: {
extend: {
colors: {
sky: colors.sky,
cyan: colors.cyan,
},
},
},
variants: {},
plugins: [
require('@tailwindcss/line-clamp'),
],
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment