How to setup a custom theme

[tahaListens]

Hello,

I am new to wanting to support beings other than myself, so I could really use your help creating my own tailwindcss theme that I can reuse across some other project, and just tweak minor things. If this is a waste of my time, please let me know haha.

just walk me through it like i am in 6th grade and barely passed my intro to web dev class, only because the teacher knew how hard I tried

So I am learning how to code so I can get a job. I want to freelance, and need to develop a strong understanding of how CSS, and i am doing so becoming a tailwind master. As i release my own tailwinds, I had the idea of asking for help, alas, here I am.

The docs are really helpful, but i just need help connecting the dots, as I never used tailwindcss 3.x, only the newest version. All the LLMs I am using are struggling at letting go of their knowledge of the old tailwind.

I want to set up my own theme for a linktree-esque page as a starter project, I have a few questions.

What is the difference between the following?

@layer components {
    .btn-link {
        @apply mb-4 w-56 py-3 px-6 flex items-center justify-center gap-3 rounded-lg shadow-md border transition-all duration-300 sm:w-64 md:w-72
    }
}

@utility btn-* {
    .btn-link {
        @apply  mb-4 w-56 py-3 px-6 flex items-center justify-center gap-3 rounded-lg shadow-md  border transition-all duration-300  sm:w-64 md:w-72
        
    }
} 

I want to do all my customization of my own utility class, btn-link, and ideally all in one spot,

I am curious why I cant use var(--surface-btn-link) in my @apply in my @layers components

I am learning a lot as a beginner so thanks for taking the time to help me!

Also I dont ask a lot questions, so please let me know how to format it better.

@import "tailwindcss";
@import "./style/theme.css"

@theme{
    --font-sans: "Inter", sans-serif;
    --font-serif: "Merriweather", serif;
    --font-mono: "Fira Code", monospace;

    --font-body: var(--font-sans);
    --font-heading: var(--font-serif);
    --font-code: var(--font-mono);
    

    /* Fire Color Palette */
    --color-fire-50: oklch(96% 0.06 90);
    --color-fire-100: oklch(90% 0.12 90);
    --color-fire-200: oklch(90% 0.15 90);
    --color-fire-300: oklch(87% 0.2 90);
    --color-fire-400: oklch(82% 0.19 90);
    --color-fire-500: oklch(76% 0.17 90);
    --color-fire-600: oklch(64% 0.15 90);
    --color-fire-700: oklch(38% 0.01 90);
    --color-fire-800: oklch(30% 0.06 90);
    --color-fire-900: oklch(22% 0.04 90);

    --text-1: var(--color-fire-900);
    --text-2: var(--color-fire-800);
    --link: var(--color-blue-500);
    --surface-1: var(--color-fire-200);
    --surface-2: var(--color-fire-300);
    --surface-3: var(--color-fire-400);
    --surface-btn-link: var(--color-fire-400);

}
/* 

.btn-link {
    
    @apply mb-4 w-56 py-3 px-6 flex items-center justify-center gap-3 rounded-lg shadow-md border transition-all duration-300 sm:w-64 md:w-72
    
} */

@layer components {
    .btn-link {
        @apply mb-4 w-56 py-3 px-6 flex items-center justify-center gap-3 rounded-lg shadow-md border transition-all duration-300 sm:w-64 md:w-72 var(--surface-btn-link);
    }
}


:root  {
    background-color: var(--surface-1);

}

Here is where I am actually using btn-link, I like how clean it looks.

 <div className="mt-8 flex flex-col items-center">
            

            {links.map((link, index) => (
                <a
                key={index}
                href={link.url}
                className="btn-link"
            >
                {link.icon}
                {link.name}
            </a>
            
            ))}
        </div>

I am curious what is the best practice for implementing what I am trying to achieve (my own utility class for various kinds of buttons i may want to use on my page)

I feel like using @utility btn-* could be helpful if i decide to have different kinds of buttons ( btn-link, btn-darkToggle, btn-resumeDownload)

Also I understand I am using the <a> and not <button>

Any and all help is appreciated.

[tahaListens]

[wongjn]

@apply only accepts valid Tailwind class names. var(--surface-btn-link) is not a Tailwind class name. It is a CSS value that references a CSS variable. As per my other comment, consider avoiding using @apply altogether and use regular CSS grammar.

[tahaListens]

hey thanks for your replies, i am updating my question for clarity, give me a few minutes to update my question.

[tahaListens]

alright have at it. Thanks for your help! I am learning alot from your previous comments, thanks for the help!

I

[wongjn]

@layer components {
    .btn-link {

Creates a CSS rulehttps://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#css_rulesets .btn-link in the components CSS cascade layer. You can use it in your HTML like:

<button class="btn-link">

---

@utility btn-* {
    .btn-link {

Doesn't do anything. The -* suffix at the end is for functional utility syntax but no indication of values, types or bare value types are indicated in this directive body. This means there is no way to write a class name that would generate CSS using this directive as-is.

---

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097

[tahaListens]

looking through this now

Can functional utilities not except variables?

[wongjn]

Yes, they can: https://tailwindcss.com/docs/adding-custom-styles#functional-utilities

[tahaListens]

okay I think understand what you are putting down. The whole appeal of tailwindcss is that a lot of stuff regarding blocks, elements, and modifiers can now live in the HTML.

So i guess the real question, what does the ultimate button component look like for my project. In this scenario, it seems like over engineering to create a custom button component. Any advice on where to look next?