tailwind v4 starter code

[tarunpotnuru18]

//if there are any error or mistakes please let me know, i am happy to learn and correct
/* there is no tailwind.config.json in the tailwindcss v4 and all custom styles need to be in the single file that is index.css /
/ this gist is for brainwave video(https://youtu.be/B91wc5dCEBA?si=PTqZzTVBm90bz_h8) */

/* //if you are absolute beginner to tailwind css then just follow tailwindcss v4 lecture by jsmastery pro and you can follow this gist if you are willing to build brainwave /
/ //if you already know tailwind v3 then i recommend observe the differences, so that in future it will be easy for you if you again have to convert older version code to v4 */

/* "radial-gradient": "radial-gradient(var(--tw-gradient-stops))"-----> we no longer need to write this in v4 */

tailwind docs sections that helpmed me in this
/* https://tailwindcss.com/docs/adding-custom-styles /
/ https://tailwindcss.com/docs/theme /
/ https://tailwindcss.com/docs/functions-and-directives */

//index.css
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300&display=swap");
@import "tailwindcss";

@theme {
--color-color-1: #ac6aff;
--color-color-2: #ffc876;
--color-color-3: #ff776f;
--color-color-4: #7adb78;
--color-color-5: #858dff;
--color-color-6: #ff98e2;
--color-stroke-1: #26242C;
--color-n-1: #FFFFFF;
--color-n-2: #CAC6DD;
--color-n-3: #ADA8C3;
--color-n-4: #757185;
--color-n-5: #3F3A52;
--color-n-6: #252134;
--color-n-7: #15131D;
--color-n-8: #0E0C15;
--color-n-9: #474060;
--color-n-10: #43435C;
--color-n-11: #1B1B2E;
--color-n-12: #2E2A41;
--color-n-13: #6C7275;

--font-sans: "Sora", sans-serif;
--font-code: "Source Code Pro", "monospace";
--font-grotesk: "Space Grotesk", "sans-serif";

--tracking-tagline: .15em;

--spacing-0.25: 0.0625rem;
--spacing-7.5: 1.875rem;
--spacing-15: 3.75rem;
--border-default: 0.0625rem;

--opacity-15: .15%;

--default-transition-duration: 200ms;
--default-transition-timing-function: "linear";

}

.conic-gradient {
background-image: conic-gradient(from 225deg, #FFC876, #79FFF7, #9F53FF, #FF98E2, #FFC876)
}

.benefit-card-1 {
background-image: url(assets/benefits/card-1.svg)
}

.benefit-card-2 {
background-image: url(assets/benefits/card-2.svg)
}

.benefit-card-3 {
background-image: url(assets/benefits/card-3.svg)
}

.benefit-card-4 {
background-image: url(assets/benefits/card-4.svg)
}

.benefit-card-5 {
background-image: url(assets/benefits/card-5.svg)
}

.benefit-card-6 {
background-image: url(assets/benefits/card-6.svg)
}

@layer components {
.container {
@apply max-w-[77.5rem] mx-auto px-5 md:px-10 lg:px-15 xl:max-w-[87.5rem]
}

.h1 {
@apply font-semibold text-[2.5rem] leading-[3.25rem] md:text-[2.75rem] md:leading-[3.75rem] lg:text-[3.25rem] lg:leading-[4.0625rem] xl:text-[3.75rem] xl:leading-[4.5rem]
}

.h2 {
@apply text-[1.75rem] leading-[2.5rem] md:text-[2rem] md:leading-[2.5rem] lg:text-[2.5rem] lg:leading-[3.5rem] xl:text-[3rem] xl:leading-tight
}

.h3 {
@apply text-[2rem] leading-normal md:text-[2.5rem]
}

.h4 {
@apply text-[2rem] leading-normal
}

.h5 {
@apply text-2xl leading-normal
}

.h6 {
@apply font-semibold text-lg leading-8
}

.body-1 {
@apply text-[0.875rem] leading-[1.5rem] md:text-[1rem] md:leading-[1.75rem] lg:text-[1.25rem] lg:leading-8
}

.body-2 {
@apply font-light text-[0.875rem] leading-6 md:text-base
}

.caption {
@apply text-sm
}

.tagline {
@apply font-grotesk font-light text-xs tracking-tagline uppercase
}

.quote {
@apply font-code text-lg leading-normal
}

.button {
@apply font-code text-xs font-bold uppercase tracking-wider
}

}

@Utility tap-highlight-color {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

/* index.css files */

• {
  scroll-behavior: smooth
  }

@layer base {
body {
@apply font-sans bg-n-8 text-n-1 text-base
}
}

.rotate-45 {
@apply rotate-[45deg]
}

.rotate-90 {
@apply rotate-[90deg]
}

.rotate-135 {
@apply rotate-[135deg]
}

.rotate-180 {
@apply rotate-[180deg]
}

.rotate-225 {
@apply rotate-[225deg]
}

.rotate-270 {
@apply rotate-[270deg]
}

.rotate-315 {
@apply rotate-[315deg]
}

.rotate-360 {
@apply rotate-[360deg]
}

.-rotate-45 {
@apply rotate-[-45deg]
}

.-rotate-90 {
@apply rotate-[-90deg]
}

.-rotate-135 {
@apply rotate-[-135deg]
}

.-rotate-180 {
@apply rotate-[-180deg]
}

.-rotate-225 {
@apply rotate-[-225deg]
}

.-rotate-270 {
@apply rotate-[-270deg]
}

.-rotate-315 {
@apply rotate-[-315deg]
}

.-rotate-360 {
@apply rotate-[-360deg]
}