Update Tailwind to latest v3.3.3 (#3320)

* Update Tailwind to latest v3.3.3

* Upgrade autoprefixer and postcss

* Move tailwindcss plugins to devDependencies

* Remove unused tailwind rules

* Remove obsolete 'transform' rules

Ref: https://tailwindcss.com/docs/upgrade-guide#automatic-transforms-and-filters

* Use the current yellow, update gray to slate

* Move webpack to devdependencies

* Go more minimal with package.json changes

* Update autoprefixer version

* Update postcss version

* Adjust dark style colors

* Use proper node version is asdf config

.tool-versions

@@ -1,4 +1,4 @@
 erlang 25.2.3
 elixir 1.14.3-otp-25
-nodejs 16.3.0
+nodejs 18.17.1
 python 3.9.12

assets/js/dashboard/comparison-input.js

@@ -166,11 +166,11 @@ const ComparisonInput = function({ site, query, history }) {
             <Transition
               as={Fragment}
               enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
+              enterFrom="opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
+              enterTo="opacity-100 scale-100"
               leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
+              leaveFrom="opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95">
+              leaveTo="opacity-0 scale-95">
               <Menu.Items className="py-1 text-left origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10" static>
                 { Object.keys(COMPARISON_MODES).map((key) => ComparisonModeOption({ label: COMPARISON_MODES[key], value: key, isCurrentlySelected: key == query.comparison, updateMode, setUiMode })) }
                 { query.comparison !== "custom" && <span>

assets/js/dashboard/components/filter-type-selector.js

@@ -50,11 +50,11 @@ export default function FilterTypeSelector(props) {
               show={open}
               as={Fragment}
               enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
+              enterFrom="opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
+              enterTo="opacity-100 scale-100"
               leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
+              leaveFrom="opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
+              leaveTo="opacity-0 scale-95"
             >
               <Menu.Items
                 static
@@ -72,4 +72,4 @@ export default function FilterTypeSelector(props) {
       </Menu>
     </div>
   )
-}
+}

assets/js/dashboard/datepicker.js

@@ -416,11 +416,11 @@ function DatePicker({ query, site, history }) {
           show={open}
           as={Fragment}
           enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
+          enterFrom="opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
+          enterTo="opacity-100 scale-100"
           leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
+          leaveFrom="opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
+          leaveTo="opacity-0 scale-95"
         >
           {renderDropDownContent()}
         </Transition>

assets/js/dashboard/filters.js

@@ -250,11 +250,11 @@ class Filters extends React.Component {
               show={open}
               as={Fragment}
               enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
+              enterFrom="opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
+              enterTo="opacity-100 scale-100"
               leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
+              leaveFrom="opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
+              leaveTo="opacity-0 scale-95"
             >
               <Menu.Items
                 static

assets/js/dashboard/site-switcher.js

@@ -249,10 +249,10 @@ export default class SiteSwitcher extends React.Component {
 
         <Transition
           show={this.state.open}
-          enter="transition ease-out duration-100 transform"
+          enter="transition ease-out duration-100"
           enterFrom="opacity-0 scale-95"
           enterTo="opacity-100 scale-100"
-          leave="transition ease-in duration-75 transform"
+          leave="transition ease-in duration-75"
           leaveFrom="opacity-100 scale-100"
           leaveTo="opacity-0 scale-95"
         >

assets/js/dashboard/stats/behaviours/index.js

@@ -33,7 +33,7 @@ export default function Behaviours(props) {
 
   const [funnelNames, _setFunnelNames] = useState(site.funnels.map(({ name }) => name))
   const [selectedFunnel, setSelectedFunnel] = useState(storage.getItem(funnelKey))
-  
+
   const [showingPropsForGoalFilter, setShowingPropsForGoalFilter] = useState(false)
 
   const onGoalFilterClick = useCallback((e) => {
@@ -88,11 +88,11 @@ export default function Behaviours(props) {
       <Transition
         as={Fragment}
         enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
+        enterFrom="opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
+        enterTo="opacity-100 scale-100"
         leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
+        leaveFrom="opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
+        leaveTo="opacity-0 scale-95"
       >
         <Menu.Items className="text-left origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
           <div className="py-1">

assets/js/dashboard/stats/graph/interval-picker.js

@@ -79,11 +79,11 @@ export function IntervalPicker({ graphData, query, site, updateInterval }) {
             as={Fragment}
             show={open}
             enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
+            enterFrom="opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
+            enterTo="opacity-100 scale-100"
             leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
+            leaveFrom="opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95">
+            leaveTo="opacity-0 scale-95">
             <Menu.Items className="py-1 text-left origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10" static>
               {options.map((option) => DropdownItem({ option, currentInterval, updateInterval }))}
             </Menu.Items>

assets/js/dashboard/stats/sources/source-list.js

@@ -110,11 +110,11 @@ export default function SourceList(props) {
           <Transition
             as={Fragment}
             enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
+            enterFrom="opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
+            enterTo="opacity-100 scale-100"
             leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
+            leaveFrom="opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
+            leaveTo="opacity-0 scale-95"
           >
             <Menu.Items className="text-left origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
               <div className="py-1">

assets/package.json

@@ -20,11 +20,11 @@
     "@kunukn/react-collapse": "^2.2.9",
     "@popperjs/core": "^2.11.6",
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.3.2",
+    "@tailwindcss/forms": "^0.5.6",
     "@tailwindcss/typography": "^0.4.1",
     "abortcontroller-polyfill": "^1.7.3",
     "alpinejs": "^2.8.2",
-    "autoprefixer": "^10.2.6",
+    "autoprefixer": "^10.4.15",
     "babel-loader": "^8.2.2",
     "chart.js": "^3.3.2",
     "chartjs-plugin-datalabels": "^2.2.0",
@@ -40,7 +40,7 @@
     "phoenix": "^1.7.2",
     "phoenix_html": "^3.3.1",
     "phoenix_live_view": "^0.18.18",
-    "postcss": "^8.3.0",
+    "postcss": "^8.4.29",
     "postcss-loader": "^6.1.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
@@ -50,7 +50,7 @@
     "react-popper": "^2.3.0",
     "react-router-dom": "^5.2.0",
     "react-transition-group": "^4.4.2",
-    "tailwindcss": "^2.1.2",
+    "tailwindcss": "^3.3.3",
     "terser-webpack-plugin": "^5.1.2",
     "url-search-params-polyfill": "^8.1.1",
     "webpack": "5.88.1",

assets/tailwind.config.js

@@ -1,20 +1,18 @@
 const colors = require('tailwindcss/colors')
 
 module.exports = {
-  purge: {
+  content: [
-    content: [
+    './js/**/*.js',
-      './js/**/*.js',
+    '../lib/plausible_web/templates/**/*.html.eex',
-      '../lib/plausible_web/templates/**/*.html.eex',
+    '../lib/plausible_web/templates/**/*.html.heex',
-      '../lib/plausible_web/templates/**/*.html.heex',
+    '../lib/plausible_web/live/**/*.ex',
-      '../lib/plausible_web/live/**/*.ex',
+    '../lib/plausible_web/components/**/*.ex',
-      '../lib/plausible_web/components/**/*.ex',
+  ],
-    ],
+  safelist: [
-    safelist: [
+    // PlausibleWeb.StatsView.stats_container_class/1 uses this class
-      // PlausibleWeb.StatsView.stats_container_class/1 uses this class
+    // it's not used anywhere else in the templates or scripts
-      // it's not used anywhere else in the templates or scripts
+    "max-w-screen-xl"
-      "max-w-screen-xl"
+  ],
-    ]
-  },
   darkMode: 'class',
   theme: {
     container: {
@@ -23,7 +21,8 @@ module.exports = {
     },
     extend: {
       colors: {
-        orange: colors.orange,
+        yellow: colors.amber, // We started usign `yellow` in v2 but it was renamed to `amber` in v3 https://tailwindcss.com/docs/upgrade-guide#removed-color-aliases
+        gray: colors.slate,
         'gray-950': 'rgb(13, 18, 30)',
         'gray-850': 'rgb(26, 32, 44)',
         'gray-825': 'rgb(37, 47, 63)'
@@ -32,7 +31,6 @@ module.exports = {
         '44': '11rem'
       },
       width: {
-        '31percent': '31%',
         'content': 'fit-content'
       },
       opacity: {
@@ -50,23 +48,8 @@ module.exports = {
       }
     },
   },
-  variants: {
-    textColor: ['responsive', 'hover', 'focus', 'group-hover'],
-    display: ['responsive', 'hover', 'focus', 'group-hover'],
-    extend: {
-      textColor: ['dark'],
-      borderWidth: ['dark'],
-      backgroundOpacity: ['dark'],
-      display: ['dark'],
-      cursor: ['hover'],
-      justifyContent: ['responsive'],
-      backgroundColor: ['odd', 'even'],
-      shadow: ['dark']
-    }
-  },
   plugins: [
     require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
     require('@tailwindcss/aspect-ratio'),
   ]
 }

lib/plausible_web/templates/site/settings_general.html.eex

@@ -10,7 +10,7 @@
     <div class="grid grid-cols-4 gap-6">
       <div class="col-span-4 sm:col-span-2">
         <%= label nil, "Domain", class: "block text-sm font-medium leading-5 text-gray-700 dark:text-gray-300" %>
-        <%= text_input nil, :domain, value: @site.domain, disabled: "disabled", class: "dark:bg-gray-900 w-full mt-1 block pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:text-gray-500 text-gray-500" %>
+        <%= text_input nil, :domain, value: @site.domain, disabled: "disabled", class: "dark:bg-gray-900 w-full mt-1 block pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md dark:text-gray-100 text-gray-500" %>
       </div>
     </div>
     <span class="inline-flex rounded-md shadow-sm">

lib/plausible_web/templates/site/settings_people.html.eex

@@ -18,7 +18,7 @@
               <p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">
                 <%= membership.user.name %>
               </p>
-              <p class="text-sm text-gray-500 truncate">
+              <p class="text-sm text-gray-400 truncate">
                 <%= membership.user.email %>
               </p>
             </div>