Tailwind > 1.0 class substitutions

the most important of these is changing all the `pin` classes: https://github.com/tailwindlabs/tailwindcss/releases?after=v1.0.0#replace-pin-with-inset

Other changes that i could identify have also been made in this commit. There are still probably some gotchas (around transitions, sliding panels etc) but at least the `ui-guide` looks and behaves recognisably now with Tailwind 2.x

The notes i kept while working out what needed changing are in the `porting-notes` dir, the key differences can summarized as:

  "flex-shrink"        -> "flex-initial"
  "pin-t"              -> "top-0"
  "pin-r"              -> "right-0"
  "pin-b"              -> "bottom-0"
  "pin-l"              -> "left-0"
  "pin-x"              -> "inset-x-0"
  "pin"                -> "inset-0"
  "pin-t-full"         -> "top-full"
  "pin-r-full"         -> "right-full"
  "pin-b-full"         -> "bottom-full"
  "pin-l-full"         -> "left-full"
  "-pin-b-40"          -> "-bottom-40"
  "whitespace-no-wrap" -> "whitespace-nowrap"
  "list-reset"         -> removed in 1.0
  "opacity-1"          -> "opacity-100"

porting-notes/just-classes.txt

@@ -1,33 +1,33 @@
-"flex-shrink"        -> "flex-initial"
-"pin-b"              -> "bottom-0"
-"pin-l-full"         -> "left-full"
-"pin-l"              -> "left-0"
-"pin-r"              -> "right-0"
-"pin-t-full"         -> "right-full"
-"pin-t"              -> "top-0"
-"pin-x"              -> "inset-x-0"
-"pin"                -> "inset-0"
-"pin-t-full"         -> "top-full"
-"pin-r-full"         -> "right-full"
-"pin-b-full"         -> "bottom-full"
-"pin-l-full"         -> "left-full"
-"-pin-b-40"          -> "-bottom-40"
-"whitespace-no-wrap" -> "whitespace-nowrap"
-"list-reset"         -> removed in 1.0
+changed throughout .purs and .css files
 
+  "flex-shrink"        -> "flex-initial"
+  "pin-t"              -> "top-0"
+  "pin-r"              -> "right-0"
+  "pin-b"              -> "bottom-0"
+  "pin-l"              -> "left-0"
+  "pin-x"              -> "inset-x-0"
+  "pin"                -> "inset-0"
+  "pin-t-full"         -> "top-full"
+  "pin-r-full"         -> "right-full"
+  "pin-b-full"         -> "bottom-full"
+  "pin-l-full"         -> "left-full"
+  "-pin-b-40"          -> "-bottom-40"
+  "whitespace-no-wrap" -> "whitespace-nowrap"
+  "list-reset"         -> removed in 1.0
+  "opacity-1"          -> "opacity-100"
 
-"bold"               -> not present in defaults
-"cn-pagination"      -> from the prefix it's clearly particular to Ocelot
-"opacity-1"          -> surely a mistake, lowest is 0.05
-"pagination"         -> ???
-"text-grey-light"    ->
-"text-red"           ->
-"transition-1/2-out" -> ???
-"transition-1/4-in"  -> ???
-"transition-1/4-out" -> ???
-"transition-1/4"     -> ???
-"transition-1/8"     -> ???
-"z-60"               -> 
+both pagination classes are only in Ocelot.Block.Pager, no rules in generated css
+  "cn-pagination"      -> from the prefix it's clearly particular to Ocelot, left as is
+  "pagination"         -> 
+
+"text-grey-light"    -> ???
+"text-red"           -> ???
+"transition-1/2-out" ->   transition: all .5s ease-out;
+"transition-1/4-in"  ->   transition: all .25s ease-in;
+"transition-1/4-out" ->   transition: all .25s ease-out;
+"transition-1/4"     ->   transition: all .25s ease;
+"transition-1/8"     ->   transition: all .125s ease;
+"z-60"               -> probably should be just 'z-50'
 
 
 "no-content"         -> from tailwind.config.js

src/Blocks/Badge.purs

@@ -15,8 +15,8 @@ baseClasses = HH.ClassName <$>
   , "before:w-full"
   , "before:h-full"
   , "before:absolute"
-  , "before:pin-t"
-  , "before:pin-l"
+  , "before:top-0"
+  , "before:left-0"
   , "flex"
   , "justify-center"
   , "items-center"

src/Blocks/Expandable.purs

@@ -90,7 +90,7 @@ contentClasses status_ = contentSharedClasses <>
       ]
     Expanded -> HH.ClassName <$>
       [ "max-h-full"
-      , "opacity-1"
+      , "opacity-100"
       , "transition-1/2-out"
       ]
   )

src/Blocks/Hover.purs

@@ -27,10 +27,10 @@ hover props anchors html hoverHtml =
   where
     anchorClasses :: Array HoverAnchor -> Array HH.ClassName
     anchorClasses = map $ HH.ClassName <<< anchorClass
-    anchorClass Left = "pin-r-full"
-    anchorClass Right = "pin-l-full"
-    anchorClass Top = "pin-b-full"
-    anchorClass Bottom = "pin-t-full"
+    anchorClass Left = "left-full"
+    anchorClass Right = "right-full"
+    anchorClass Top = "bottom-full"
+    anchorClass Bottom = "top-full"
 
 hover_
   :: ∀ p i

src/Blocks/ItemContainer.purs

@@ -21,7 +21,6 @@ menuClasses = HH.ClassName <$>
   [ "bg-white"
   , "text-black-20"
   , "border"
-  , "list-reset"
   , "rounded"
   , "shadow"
   , "absolute"
@@ -33,8 +32,8 @@ dropdownClasses :: Array HH.ClassName
 dropdownClasses = menuClasses <>
   ( HH.ClassName <$>
     [ "absolute"
-    , "pin-t-full"
-    , "pin-l"
+    , "top-full"
+    , "left-0"
     , "max-h-160"
     , "overflow-y-auto"
     ]
@@ -44,8 +43,8 @@ droprightClasses :: Array HH.ClassName
 droprightClasses = menuClasses <>
   ( HH.ClassName <$>
     [ "absolute"
-    , "pin-t"
-    , "pin-l-full"
+    , "top-0"
+    , "left-full"
     ]
   )
 
@@ -74,13 +73,13 @@ itemContainerClasses = baseClasses <>
     , "overflow-y-auto"
     , "z-50"
     , "border-b-2"
-    , "pin-t-full"
-    , "pin-l"
+    , "top-full"
+    , "left-0"
     ]
   )
 
 ulClasses :: Array HH.ClassName
-ulClasses = HH.ClassName <$> [ "list-reset" ]
+ulClasses = HH.ClassName <$> [ ]
 
 liClasses :: Array HH.ClassName
 liClasses = HH.ClassName <$>

src/Blocks/Layout.purs

@@ -32,8 +32,8 @@ popover_ = popover []
 stickyClasses :: Array HH.ClassName
 stickyClasses = HH.ClassName <$>
   [ "fixed"
-  , "pin-t"
-  , "pin-x"
+  , "top-0"
+  , "inset-x-0"
   , "w-full"
   , "shadow-md"
   , "z-60"

src/Blocks/TabControl.purs

@@ -35,7 +35,6 @@ innerClasses = HH.ClassName <$>
   , "mx-auto"
   , "flex"
   , "h-16"
-  , "list-reset"
   ]
 
 tabClasses :: Array HH.ClassName

src/Blocks/Toast.purs

@@ -28,9 +28,9 @@ toastContainerClasses = HH.ClassName <$>
   , "transition-1/2-out"
   , "items-center"
   , "fixed"
-  , "pin-l"
-  , "pin-r"
-  , "pin-b"
+  , "left-0"
+  , "right-0"
+  , "bottom-0"
   , "z-10"
   ]
 

src/Blocks/Tray.purs

@@ -24,8 +24,8 @@ trayClasses = HH.ClassName <$>
   [ "fixed"
   , "bg-white"
   , "p-6"
-  , "pin-b"
-  , "pin-l"
+  , "bottom-0"
+  , "left-0"
   , "shadow"
   , "border-t"
   , "border-grey-90"
@@ -37,11 +37,11 @@ trayClasses = HH.ClassName <$>
 
 trayOpenClasses :: Array HH.ClassName
 trayOpenClasses = HH.ClassName <$>
-  [ "pin-b" ]
+  [ "bottom-0" ]
 
 trayClosedClasses :: Array HH.ClassName
 trayClosedClasses = HH.ClassName <$>
-  [ "-pin-b-40" ]
+  [ "-bottom-40" ]
 
 tray
   :: ∀ p i

src/Components/MultiInput/TextWidth.purs

@@ -134,8 +134,8 @@ ghostClasses =
   , "inline-block"
   , "invisible"
   , "overflow-hidden"
-  , "pin-t"
-  , "whitespace-no-wrap"
+  , "top-0"
+  , "whitespace-nowrap"
   ]
     <#> Halogen.ClassName
 

src/Components/SearchBar.purs

@@ -240,7 +240,7 @@ render st@{ query, open } =
        , "hover:text-grey-50"
        , "text-xs"
        , "transition-1/4"
-       , "flex-shrink"
+       , "flex-initial"
        ]
 
      buttonCondClasses =

src/DatePicker.purs

@@ -584,8 +584,8 @@ renderCalendar y m calendarItems =
   where
     dropdownClasses :: Array HH.ClassName
     dropdownClasses = HH.ClassName <$>
-      [ "pin-t"
-      , "pin-l"
+      [ "top-0"
+      , "left-0"
       , "p-6"
       , "bg-white"
       , "text-center"
@@ -608,7 +608,7 @@ renderItem index item =
           <> "transition-1/4 border border-white "
           <> "before:no-content before:transition-1/4 "
           <> "before:w-full before:h-full "
-          <> "before:absolute before:pin-t before:pin-l "
+          <> "before:absolute before:top-0 before:left-0 "
           <> (getCalendarStyles item)
       ]
     )

src/Parts/Modal.purs

@@ -87,7 +87,7 @@ type HeaderProps p i =
 backgroundClasses :: Array HH.ClassName
 backgroundClasses = HH.ClassName <$>
   [ "fixed"
-  , "pin"
+  , "inset-0"
   , "bg-black-modal-a90"
   , "fade-in"
   , "z-10"
@@ -97,8 +97,8 @@ backgroundClasses = HH.ClassName <$>
 modalClasses :: Array HH.ClassName
 modalClasses = HH.ClassName <$>
   [ "absolute"
-  , "pin-x"
-  , "pin-t"
+  , "inset-x-0"
+  , "top-0"
   , "my-20"
   , "m-auto"
   , "max-w-lg"

src/Parts/Panel.purs

@@ -149,14 +149,14 @@ backgroundClasses =
   [ "bg-black-modal-a90"
   , "fade-in"
   , "fixed"
-  , "pin"
+  , "inset-0"
   , "z-10"
   ]
     <#> Halogen.HTML.ClassName
 
 backgroundOpenClasses :: Array Halogen.HTML.ClassName
 backgroundOpenClasses =
-  [ "opacity-1"
+  [ "opacity-100"
   , "visible"
   ]
     <#> Halogen.HTML.ClassName
@@ -180,7 +180,7 @@ panelClasses =
 
 panelLeftClasses :: Array Halogen.HTML.ClassName
 panelLeftClasses =
-  [ "pin-l"
+  [ "left-0"
   ]
     <#> Halogen.HTML.ClassName
 
@@ -192,7 +192,7 @@ panelLeftCss =
 
 panelRightClasses :: Array Halogen.HTML.ClassName
 panelRightClasses =
-  [ "pin-r"
+  [ "right-0"
   ]
     <#> Halogen.HTML.ClassName
 

src/TimePicker.purs

@@ -174,8 +174,8 @@ dropdownClasses = HH.ClassName <$>
   [ "max-h-80"
   , "w-full"
   , "overflow-y-scroll"
-  , "pin-t"
-  , "pin-l"
+  , "top-0"
+  , "left-0"
   , "bg-white"
   , "text-center"
   ]

src/Typeahead.purs

@@ -713,7 +713,7 @@ renderHeaderSearchDropdown defaultLabel resetLabel renderItem renderFuzzy st =
   renderSearchDropdown resetLabel label renderFuzzy st
   where
     label = Halogen.HTML.span
-      [ Ocelot.HTML.Properties.css "text-white text-3xl font-thin cursor-pointer whitespace-no-wrap" ]
+      [ Ocelot.HTML.Properties.css "text-white text-3xl font-thin cursor-pointer whitespace-nowrap" ]
       [ Data.Maybe.maybe (Halogen.HTML.text defaultLabel) (Halogen.HTML.fromPlainHTML <<< renderItem) st.selected
       , Ocelot.Block.Icon.collapse [ Ocelot.HTML.Properties.css "ml-3 text-xl text-grey-50 align-middle" ]
       ]
@@ -730,7 +730,7 @@ renderMulti iprops renderItem renderContainer st =
     [ if (not disabled && not Data.Array.null st.selected)
         then
           Halogen.HTML.a
-            [ Ocelot.HTML.Properties.css "absolute -mt-7 pin-r underline text-grey-70 cursor-pointer"
+            [ Ocelot.HTML.Properties.css "absolute -mt-7 right-0 underline text-grey-70 cursor-pointer"
             , Halogen.HTML.Events.onClick \_ -> Select.Action $ RemoveAll
             ]
             [ Halogen.HTML.text "Remove All" ]
@@ -879,7 +879,7 @@ renderToolbarSearchDropdown defaultLabel resetLabel renderItem renderFuzzy st =
     label = Ocelot.Block.ItemContainer.dropdownButton
       Halogen.HTML.span
       [ Halogen.HTML.Properties.classes
-        $ Halogen.HTML.ClassName "whitespace-no-wrap"
+        $ Halogen.HTML.ClassName "whitespace-nowrap"
         : Ocelot.Block.Button.buttonMainClasses
         <> Ocelot.Block.Button.buttonClearClasses
       ]

ui-guide/App/App.purs

@@ -116,7 +116,7 @@ app =
     [ HH.div
       [ HP.class_ $ HH.ClassName "fixed w-full" ]
       [ HH.div
-        [ HP.class_ $ HH.ClassName "pin-t bg-white md:hidden relative border-b border-grey-light h-12 py-8 flex items-center" ]
+        [ HP.class_ $ HH.ClassName "top-0 bg-white md:hidden relative border-b border-grey-light h-12 py-8 flex items-center" ]
         [ HH.a
           [ HP.class_ $ HH.ClassName "mx-auto inline-flex items-center"
           , HP.href "" ]
@@ -143,8 +143,8 @@ app =
       ( HH.ClassName <$>
         [ "hidden"
         , "fixed"
-        , "pin-y"
-        , "pin-l"
+        , "inset-y-0"
+        , "left-0"
         , "overflow-y-auto"
         , "md:overflow-visible"
         , "scrolling-touch"

ui-guide/Utilities/Async.purs

@@ -190,7 +190,7 @@ renderUserImg (User { eyeColor, hairColor, skinColor }) =
       )
     , HH.span
       [ HP.classes $ HH.ClassName <$>
-        [ "pin-b"
+        [ "bottom-0"
         , "h-1"
         , "w-full"
         , "bg-" <> colorToCSSColor skinColor2