TeakUI Components are based on TailwindCSS so they're made to be easily copied and pasted into your project. Once you run the Tailwind CLI on your files again, any new classes will be output to your build css file.
Note: Always make sure to run a fresh build after adding new components to your code base to ensure Tailwind picks up the new classes.
Since TeakUI Components are made to be easily copied and pasted into your project, they are also easy to modify with TailwindCSS. Let's take a look at an example.
Here we have a simple button with an svg icon.
<!-- Icon Button -->
<div class="text-center">
<a href="#" class="inline-block py-4 px-12 align-middle rounded-full bg-blue-700 text-white font-semibold hover:bg-blue-800">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 inline-block align-middle mr-1 mt-[-1px]">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
Button</a>
</div>Which looks like this:
Once you've copied this code into your html, you can make any modifications you'd like. For this example, we might want a green button with slightly rounded corners, so we could change the code like so:
<!-- Icon Button -->
<div class="text-center">
<a href="#" class="inline-block py-4 px-12 align-middle rounded-md bg-green-700 text-white font-semibold hover:bg-green-800">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 inline-block align-middle mr-1 mt-[-1px]">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
Button</a>
</div>Notice the 'bg-blue-' classes have changed to 'bg-green-' and 'rounded-full' has changed to 'rounded-md'.
Now our button would look like this:
As you can see, TailwindCSS makes it very easy to modify the components to fit your design.
Periodically we release new versions of our components. These may include updates to existing components or new components entirely. Since TeakUI Components are made to be copied, pasted, and modified to fit your needs, there's no need to update existing usage of those components.
That said, if you would like to apply any new updates to your existing components, the easiest method would be to compare the files from each version to see what's changed and then apply those same changes to your customized component.
Most IDEs have a simple method of doing a diff on 2 files or you can manually review the files side by side.
