Added custom module for classes that aren't in Tailwind - allows us to use contextual alternates for Alpha Lyrae

apps/explorer/src/app/components/header/header.tsx

@@ -9,7 +9,7 @@ export const Header = ({ toggleTheme }: ThemeToggleProps) => {
   return (
     <header className="flex items-center px-16 py-16 border-b-1 col-start-1 col-end-3 row-start-1 row-end-2">
       <h1
-        className="text-h3 font-alpha uppercase contextual-alternates"
+        className="text-h3 font-alpha uppercase calt"
         data-testid="explorer-header"
       >
         Vega Explorer

apps/explorer/src/styles.css

@@ -7,9 +7,4 @@
   src: url('./AlphaLyrae-Medium.woff');
 }
 
-/* No Tailwind class for this */
-.contextual-alternates {
-  font-feature-settings: 'calt';
-}
-
 @tailwind utilities;

apps/explorer/tailwind.config.js

@@ -1,6 +1,7 @@
 const { join } = require('path');
 const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind');
 const theme = require('../../libs/tailwindcss-config/src/theme');
+const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');
 
 module.exports = {
   content: [
@@ -9,5 +10,5 @@ module.exports = {
   ],
   darkMode: 'class',
   theme,
-  plugins: [],
+  plugins: [vegaCustomClasses],
 };

apps/stats/tailwind.config.js

@@ -1,6 +1,7 @@
 const { join } = require('path');
 const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind');
 const theme = require('../../libs/tailwindcss-config/src/theme');
+const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');
 
 module.exports = {
   content: [
@@ -9,5 +10,5 @@ module.exports = {
   ],
   darkMode: 'class',
   theme,
-  plugins: [],
+  plugins: [vegaCustomClasses],
 };

apps/trading/tailwind.config.js

@@ -1,6 +1,7 @@
 const { join } = require('path');
 const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind');
 const theme = require('../../libs/tailwindcss-config/src/theme');
+const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');
 
 module.exports = {
   content: [
@@ -10,5 +11,5 @@ module.exports = {
   ],
   darkMode: 'class',
   theme,
-  plugins: [],
+  plugins: [vegaCustomClasses],
 };

libs/tailwindcss-config/src/index.js

@@ -1,4 +1,7 @@
 const theme = require('./theme');
+const vegaCustomClasses = require('./vega-custom-classes');
+
 module.exports = {
   theme,
+  plugins: [vegaCustomClasses],
 };

libs/tailwindcss-config/src/vega-custom-classes.js

@@ -0,0 +1,11 @@
+const plugin = require('tailwindcss/plugin');
+
+const vegaCustomClasses = plugin(function ({ addUtilities }) {
+  addUtilities({
+    '.calt': {
+      fontFeatureSettings: "'calt'",
+    },
+  });
+});
+
+module.exports = vegaCustomClasses;