Be consistent with kebab case for Tailwind class names

src/annotator/components/AdderToolbar.js

@@ -136,7 +136,7 @@ export default function AdderToolbar({
     <div
       className={classnames(
         'AdderToolbar',
-        'absolute select-none bg-white rounded shadow-adderToolbar',
+        'absolute select-none bg-white rounded shadow-adder-toolbar',
         // Because `.AdderToolbar` rules reset `all:initial`, we cannot use
         // default border values from Tailwind and have to be explicit about
         // all border attributes
@@ -144,8 +144,8 @@ export default function AdderToolbar({
         // Start at a very low opacity as we're going to fade in in the animation
         'opacity-5',
         {
-          'animate-adderPopUp': arrowDirection === 'up' && isVisible,
-          'animate-adderPopDown': arrowDirection === 'down' && isVisible,
+          'animate-adder-pop-up': arrowDirection === 'up' && isVisible,
+          'animate-adder-pop-down': arrowDirection === 'down' && isVisible,
         }
       )}
       dir="ltr"

src/sidebar/components/Excerpt.js

@@ -178,7 +178,7 @@ function Excerpt({
           {
             // For expandable excerpts not using inlineControls, style this
             // element with a custom shadow-like gradient
-            'bg-gradient-to-b from-excerptStop1 via-excerptStop2 to-excerptStop3':
+            'bg-gradient-to-b from-excerpt-stop-1 via-excerpt-stop-2 to-excerpt-stop-3':
               !inlineControls && isExpandable,
             'bg-none': inlineControls,
             // Don't make this shadow visible OR clickable if there's nothing

tailwind.config.mjs

@@ -16,8 +16,8 @@ export default {
   theme: {
     extend: {
       animation: {
-        adderPopUp: 'adderPopUp 0.08s ease-in forwards',
-        adderPopDown: 'adderPopDown 0.08s ease-in forwards',
+        'adder-pop-down': 'adder-pop-down 0.08s ease-in forwards',
+        'adder-pop-up': 'adder-pop-up 0.08s ease-in forwards',
         'fade-in-slow': 'fade-in 1s ease-in',
       },
       borderRadius: {
@@ -30,7 +30,7 @@ export default {
       },
       boxShadow: {
         DEFAULT: '0 1px 1px rgba(0, 0, 0, 0.1)',
-        adderToolbar: '0px 2px 10px 0px rgba(0, 0, 0, 0.25)',
+        'adder-toolbar': '0px 2px 10px 0px rgba(0, 0, 0, 0.25)',
         focus: `0 0 0 2px ${focusBlue}`,
         'focus-inner': `inset 0 0 0 2px ${focusBlue}`,
         // The shadow shown along the edge of the sidebar in the clean theme
@@ -88,12 +88,12 @@ export default {
       gradientColorStops: {
         // These gradient stops define a custom gradient shown at the bottom of
         // long annotation body excerpts.
-        excerptStop1: 'rgba(255, 255, 255, 0) 50%',
-        excerptStop2: 'rgba(0, 0, 0, 0.08) 95%',
-        excerptStop3: 'rgba(0, 0, 0, 0.13) 100%',
+        'excerpt-stop-1': 'rgba(255, 255, 255, 0) 50%',
+        'excerpt-stop-2': 'rgba(0, 0, 0, 0.08) 95%',
+        'excerpt-stop-3': 'rgba(0, 0, 0, 0.13) 100%',
       },
       keyframes: {
-        adderPopDown: {
+        'adder-pop-down': {
           '0%': {
             opacity: '0.05',
             transform: 'scale(0.8) translateY(10px)',
@@ -106,7 +106,7 @@ export default {
             transform: 'scale(1) translateY(0px)',
           },
         },
-        adderPopUp: {
+        'adder-pop-up': {
           '0%': {
             opacity: '0.05',
             transform: 'scale(0.8) translateY(-10px)',