@tailwind base;
/* tailwind postcss directive (layer)
** Reset all stylings for consistency
*/
@tailwind components;
/* Generic tailwind components
*/
@tailwind utilities;
/* Majority of tailwind classes
*/

npm init -y
npm install -D tailwindcss postcss autoprefixer vite
// Add "dev": "vite" to scripts in package.json
// Generates tailwind and postcss config files.

.bg-gray-100; /*Applies some background color*/
.p-1 /*padding: 0.25rem;*/
/*padding: 0.25rem;*/
/*padding: 0.25rem;*/
/*padding: 0.25rem;*/
.px / y / l / r / t / b 
.mt-6 /*margin*/
.rounded-xs /*rounded corner*/
.shadow
.text-xl /*text size*/
.font-thin /*text weight*/
.text-gray-900; /*text color dark gray instead of black*/

.space-y-6 /*Spacing utility applies my-6 between all child elements.*/
/*Spacing utility applies my-6 between all child elements.*/
/*Spacing utility applies my-6 between all child elements.*/
/*Spacing utility applies my-6 between all child elements.*/
.space-x-1 /*Spacing utility applies mx-1 to all child elements.*/

/*Button*/
px-5 py-3 bg-indigo-500 text-white
inline-block /*respect spacing*/
rounded-lg shadow-lg 
uppercase tracking-wider /*text transformation (increase letter spacing for uppercase)*/
font-semibold text-sm;

max-w-md /*Limit width*/
mx-auto /*Centers content*/

sm:max-w-xl
img sm:h-64 sm:w-full
sm:object-cover /*Maintain aspect ratio*/
object-center vs object-top /*Area of image to display*/

/*Split panel for large breakpoint
Hide first image and hide on large breakpoint*/
hidden lg:block /*show on large*/

/*flex or css grid*/
grid lg:grid-cols-2 /*grid with 2 columns for large*/

/*for child to use whole space of parent child absolute relative to parent*/
parent relative
img absolute inset-0 /*all directions position 0px*/ w-full h-full
object object-center /*Remove distortion*/

/*line break for large*/<br class="hidden l:inline">

/*Resize grid ratio for large*/
2xl:grid-cols-5 /*parent*/

2xl:col-span-2 /*chilren*/
2xl:col-span-3

hover:-translate-y-0.5 transform /*toggle to enable transformation*/
transition /*enable smooth transition*/

focus:outline-none /*Remove default outline*/
focus:ring /*Apply default box shadow*/
focus:ring-offset-2 focus:ring-opacity-50

/*For active variant, have to activate it
Under config file: add backgroundColor:['active'] to variants.extend.
Use extend to insert variants, not replace existing activated ones like hover.
*/
active:bg-indigo-600 /*darker*/

sm:hover:bg-green /*Apply to variant for certain breakpoints

/*tailwind.css*/
@tailwind components;
.btn {
  @apply inline-block px-5 etc...;
}
@tailwind utilities; /*Defined after @apply to prevent styles
 in utilities from being overriden*/

/*Alternatively use @layer to specify location to apply changes to.*/
@layer components {
  .btn {
    @apply inline-block px-5 etc...;
  }
}

/*Within component*/
class="btn"

npx tailwindcss init tailwind-full.config.js --full //Generate full config file

module.exports={
  theme:{
    screens:{
      giant: "1536px"
    }
  },
  colors: {
    //use own name instead of overriding to separate own styles from default.
    extend: {
      brand: "#000000", //creates classes like bg-brand
      "brand-light": "#000000", //creates bg-brand-light
//Alternatively
      brand: {
        DEFAULT: "#000000",
        light: "#000000",
      }

    },
  },
  spacing:{},
  animation:{},
  ...
}

//package.json
"scripts": {
  "build": "vite build"
}

//tailwind config
purge: ["./src/**/*.svelte"] //Define glob for files to be cleared by purgeCSS
//Ensure all files not within globs are included
//to prevent classes in those files from being purged
//Only finds strings, cannot identify dynamically constructed class names

purge: {
  content: ["./src/**/*.svelte"],
  enabled: boolean,
  options: {} //refer to purgeCSS docs
}