Add Tailwind IntelliSense to objects

.vscode/settings.json

@@ -6,6 +6,7 @@
   "eslint.validate": ["javascript", "javascriptreact", "astro", "typescript", "typescriptreact"],
   "files.eol": "\n",
   "tailwindCSS.classAttributes": ["class", "className", "class:list"],
+  "tailwindCSS.experimental.classRegex": [["/\\* tw \\*/ ([^;]*);", "'([^']*)'"]],
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "[astro]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },

src/components/atoms/button.astro

@@ -6,7 +6,7 @@ export interface Props {
 
 const { href, download } = Astro.props;
 
-const classes = {
+const classes = /* tw */ {
   main: 'inline-flex items-center px-4 h-10 text-base font-medium rounded-md shadow-sm text-white bg-primary-600 select-none cursor-pointer',
   hover: 'hover:bg-primary-700',
   active: 'active:translate-y-px',

src/components/atoms/icon-button.astro

@@ -19,7 +19,7 @@ const sizeMap: Record<IconButtonSize, string> = {
 
 const { icon, href, target, size, ...rest } = Astro.props;
 
-const classes = {
+const classes = /* tw */ {
   main: 'flex items-center justify-center rounded text-gray-400 bg-gray-100 dark:bg-gray-600 dark:text-gray-200',
   active: 'active:translate-y-px',
   focus: 'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',

src/components/atoms/sidebar-item.tsx

@@ -14,6 +14,12 @@ export interface SidebarItemProps {
 
 export const MAIN_SECTION: Section = 'main';
 
+const classes = /* tw */ {
+  main: 'inline-flex h-10 w-10 items-center justify-center rounded-lg transition',
+  active: 'bg-primary-600 text-white',
+  inactive: 'bg-white text-gray-400 hover:bg-primary-600 hover:text-white dark:bg-gray-800 dark:text-gray-200',
+};
+
 const SidebarItem = ({ section, icon, title = '' }: SidebarItemProps) => {
   const { hash } = useLocation();
   const href = `#${section}`;
@@ -24,13 +30,7 @@ const SidebarItem = ({ section, icon, title = '' }: SidebarItemProps) => {
     <Tooltip content={`${title || section.charAt(0).toUpperCase() + section.slice(1)} section`} placement="left">
       <a
         href={href}
-        className={`inline-flex h-10 w-10 items-center justify-center rounded-lg transition
-        ${
-          active
-            ? 'bg-primary-600 text-white'
-            : 'bg-white text-gray-400 hover:bg-primary-600 hover:text-white dark:bg-gray-800 dark:text-gray-200'
-        }
-        `}
+        className={`${classes.main} ${active ? classes.active : classes.inactive}`}
         aria-current={active ? 'page' : undefined}
         aria-label={`${section} section`}
       >

src/components/atoms/skill-level-tile.astro

@@ -7,8 +7,16 @@ export interface Props {
 const { skillLevel, tileLevel } = Astro.props;
 
 const isFilled = skillLevel >= tileLevel;
-const filledClass = isFilled ? 'bg-gray-500 dark:bg-gray-300' : 'bg-gray-200 dark:bg-gray-500';
+const classes = /* tw */ {
+  filled: 'bg-gray-500 dark:bg-gray-300',
+  empty: 'bg-gray-200 dark:bg-gray-500',
+};
 ---
 
-<div class={`w-9 h-2 last:rounded-l-none last:rounded-r-sm first:rounded-l-sm first:rounded-r-none ${filledClass}`}>
+<div
+  class:list={[
+    'w-9 h-2 last:rounded-l-none last:rounded-r-sm first:rounded-l-sm first:rounded-r-none',
+    isFilled ? classes.filled : classes.empty,
+  ]}
+>
 </div>

src/components/sections/favorites-section.astro

@@ -74,7 +74,7 @@ const section: Section = 'favorites';
           <Typography variant="section-subtitle" id={`${section}-${name}-heading`}>
             {subsectionTitle}
           </Typography>
-          <div class={`grid gap-8 ${columnsLayout}`}>
+          <div class:list={['grid gap-8', columnsLayout]}>
             {data.map((value) => (
               <Component value={value} />
             ))}