chore: Tailwind 3.3 and TS config file (#1568)

* chore: upgrade Tailwind from 3.2.7 to 3.3.0

* chore: use TS for Tailwind config

* chore: update Tailwind class ordering for 3.3

.storybook/pages/AlongDemo/AlongDemo.tsx

@@ -330,7 +330,7 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
               </a>
             </video>
 
-            <div className="mt-4 ml-2 flex gap-4">
+            <div className="ml-2 mt-4 flex gap-4">
               {ReplyIcon}
               <Text>
                 My greatest accomplishment this year was in math, because I
@@ -448,7 +448,7 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
           id={notesTextareaId}
           placeholder="Add any notes about Mikaela here. Only you can see them."
         ></textarea>
-        <Button className="mt-2 mb-16 w-full" variant="secondary">
+        <Button className="mb-16 mt-2 w-full" variant="secondary">
           Save
         </Button>
       </aside>

.storybook/pages/ProjectOverview/ProjectOverview.tsx

@@ -236,7 +236,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
               question in their conclusion. Students craft evidence-supported
               explanations of how the body is organized and functions.
             </Text>
-            <dl className="mt-0 mb-6 flex">
+            <dl className="mb-6 mt-0 flex">
               <dt>Term 1:</dt>
               <dd className="ml-4">
                 <Link>Constructing and Evidence based Explanation</Link>
@@ -248,7 +248,7 @@ export const ProjectOverview = ({ activeIndex = 0 }: Props) => {
               to frame their shared experiment, then describe the group research
               question in the introduction.
             </Text>
-            <dl className="mt-0 mb-8 flex">
+            <dl className="mb-8 mt-0 flex">
               <dt>Term 1:</dt>
               <dd className="ml-4">
                 <Link>Constructing and Evidence based Explanation</Link>

.storybook/pages/StudentRefinement/StudentRefinement.tsx

@@ -513,7 +513,7 @@ export const StudentRefinement = () => {
             <div className="fpo">Overview</div>
           </Tab>
           <Tab title="Students">
-            <div className="px-12 pt-8 pb-12">
+            <div className="px-12 pb-12 pt-8">
               <div className={styles['student-refinement__summary-cards']}>
                 <DataSummaryCard
                   className={styles['student-refinement__summary-card']}

.storybook/pages/WireframeDemo/WireframeDemo.tsx

@@ -256,7 +256,7 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
               src={PlaceholderVideo}
             />
 
-            <div className="mt-4 ml-8 flex gap-4">
+            <div className="ml-8 mt-4 flex gap-4">
               <Icon
                 className="min-w-[1rem]"
                 name="circle"
@@ -370,7 +370,7 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
           )}
           placeholder="Add any notes about Mikaela here. Only you can see them."
         ></textarea>
-        <Button className="mt-2 mb-16 w-full" variant="secondary">
+        <Button className="mb-16 mt-2 w-full" variant="secondary">
           Save
         </Button>
       </aside>

package.json

@@ -161,7 +161,7 @@
     "style-dictionary": "^3.7.2",
     "stylelint": "^15.3.0",
     "stylelint-config-recommended": "^10.0.1",
-    "tailwindcss": "^3.2.7",
+    "tailwindcss": "^3.3.0",
     "ts-jest": "^29.0.5",
     "typescript": "^4.9.5"
   },

src/components/Skeleton/Skeleton.stories.tsx

@@ -71,25 +71,25 @@ export const LayoutExample: StoryObj<Args> = {
             width="50px"
           />
           <Skeleton.Text
-            className="mt-2 mb-2"
+            className="mb-2 mt-2"
             height="4rem"
             isAnimating={isAnimating}
             width="15ch"
           />
           <Skeleton.Text
-            className="mt-2 mb-2"
+            className="mb-2 mt-2"
             height="1.5rem"
             isAnimating={isAnimating}
             width="30ch"
           />
           <Skeleton.Text
-            className="mt-2 mb-2"
+            className="mb-2 mt-2"
             height="1.5rem"
             isAnimating={isAnimating}
             width="25ch"
           />
           <Skeleton.Text
-            className="mt-2 mb-8"
+            className="mb-8 mt-2"
             height="1.5rem"
             isAnimating={isAnimating}
             width="10ch"

src/components/Skeleton/__snapshots__/Skeleton.test.ts.snap

@@ -31,22 +31,22 @@ exports[`<Skeleton /> LayoutExample story renders snapshot 1`] = `
     />
     <div
       aria-hidden="true"
-      class="mt-2 mb-2 skeleton skeleton--is-animating"
+      class="mb-2 mt-2 skeleton skeleton--is-animating"
       style="width: 15ch; height: 4rem;"
     />
     <div
       aria-hidden="true"
-      class="mt-2 mb-2 skeleton skeleton--is-animating"
+      class="mb-2 mt-2 skeleton skeleton--is-animating"
       style="width: 30ch; height: 1.5rem;"
     />
     <div
       aria-hidden="true"
-      class="mt-2 mb-2 skeleton skeleton--is-animating"
+      class="mb-2 mt-2 skeleton skeleton--is-animating"
       style="width: 25ch; height: 1.5rem;"
     />
     <div
       aria-hidden="true"
-      class="mt-2 mb-8 skeleton skeleton--is-animating"
+      class="mb-8 mt-2 skeleton skeleton--is-animating"
       style="width: 10ch; height: 1.5rem;"
     />
     <div

tailwind.config.js → tailwind.config.ts

@@ -1,4 +1,5 @@
-const edsTokens = require('./lib/tokens/json/css-variables-nested.json').eds;
+import type { Config } from 'tailwindcss';
+import { eds as edsTokens } from './lib/tokens/json/css-variables-nested.json';
 
 const {
   background: backgroundColorTokens,
@@ -7,7 +8,7 @@ const {
   ...colorTokens
 } = edsTokens.theme.color;
 
-module.exports = {
+export default {
   /**
    * The main value in TW utility classes is for Storybook stories & recipes.
    * We avoid using them in component styles to reduce chance of conflict with other libraries.
@@ -63,4 +64,4 @@ module.exports = {
       xxl: '1400px',
     },
   },
-};
+} satisfies Config;