#61 adds grid tokens to tailwind.config.js

thinkshout · Mar 9, 2024 · 4b68c3c · 4b68c3c
1 parent 1fc19e1
commit 4b68c3c
Showing 1 changed file with 62 additions and 62 deletions.
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,72 +6,72 @@ const site_spacing = require('./tokens/tailwind-site-spacing.json');
 const plugin     = require( 'tailwindcss/plugin' );
 
 module.exports = {
-  prefix: '',
-  content: [
-    './views/**/*.{html,twig}',
-    './js/**/*.js',
-  ],
-  theme: {
-    colors: tokens.color,
-    container: {
-      center: true
-    },
-    fontFamily: tokens.font.family,
-    fontSize: tokens.font.size,
-    fontWeight: tokens.font.weight,
-    lineHeight: tokens.lh,
-    screens: tokens.screen,
-    spacing: tokens.spacer,
-    transitionDuration: tokens.duration,
-    zIndex: tokens.z,
-    extend: {},
-  },
-  variants: {
-    extend: {},
-  },
-  plugins: [
+	prefix: '',
+	content: [
+		'./views/**/*.{html,twig}',
+		'./js/**/*.js',
+	],
+	theme: {
+		colors: tokens.color,
+		container: {
+			center: true
+		},
+		fontFamily: tokens.font.family,
+		fontSize: tokens.font.size,
+		fontWeight: tokens.font.weight,
+		lineHeight: tokens.lh,
+		screens: tokens.screen,
+		spacing: tokens.spacer,
+		transitionDuration: tokens.duration,
+		zIndex: tokens.z,
+		extend: {},
+	},
+	variants: {
+		extend: {},
+	},
+	plugins: [
 		plugin(
 			function ({ addComponents, theme }) {
 				addComponents({
 					// Auto generate typography classes from keys in tailwind-typography.json
-          // Loops through each key in the typography.style object and creates a new object with the key as the class name and the value as the styles
-          ...Object.keys(typography.style).map((key) => {
-            return {
-              [`${key}`]: typography.style[key],
-            }
-          // Reduce the mapped array of objects into a single object
-          }).reduce((typographyStyles, newTypographyStyleObject) => ({ ...typographyStyles, ...newTypographyStyleObject }), {}),
-          // Auto generate grid classes from keys in tailwind-grids.json
-          // Loops through each key in the grids.grid object and creates a new object with the key as the class name
-          // and the value as the styles
-          ...Object.keys(grids.grid).map((key) => {
-            return {
-              [`${key}`]: grids.grid[key],
-            }
-            // Reduce the mapped array of objects into a single object
-          }).reduce((gridsStyles, newGridsStyleObject) => ({ ...gridsStyles, ...newGridsStyleObject }), {}),
-          // Auto generate button classes from keys in tailwind-btns.json
-          // Loops through each key in the btns.style object and creates a new object with the key as the class name
-          // and the value as the styles
-          ...Object.keys(btns.btn).map((key) => {
-            return {
-              [`${key}`]: btns.btn[key],
-            }
-            // Reduce the mapped array of objects into a single object
-          }).reduce((btnsStyles, newBtnsStyleObject) => ({ ...btnsStyles, ...newBtnsStyleObject }), {}),
-          // Loops through each key in the site spacing.style object and creates a new object with the key as the class
-          // name and the value as the styles
-          ...Object.keys(site_spacing.spacing).map((key) => {
-            return {
-              [`${key}`]: site_spacing.spacing[key],
-            }
-            // Reduce the mapped array of objects into a single object
-          }).reduce((siteSpacingStyles, newSiteSpacingStyleObject) => ({ ...siteSpacingStyles, ...newSiteSpacingStyleObject }), {}),
-          // Auto generate block level spacing classes from keys in tailwind-site-spacing.json
-          // Loops through each key in the site_spacing.spacing object and creates a new object with the key as the
-          // class name and the value as the styles
-        });
+					// Loops through each key in the typography.style object and creates a new object with the key as the class name and the value as the styles
+					...Object.keys(typography.style).map((key) => {
+						return {
+							[`${key}`]: typography.style[key],
+						}
+						// Reduce the mapped array of objects into a single object
+					}).reduce((typographyStyles, newTypographyStyleObject) => ({ ...typographyStyles, ...newTypographyStyleObject }), {}),
+					// Auto generate grid classes from keys in tailwind-grids.json
+					// Loops through each key in the grids.grid object and creates a new object with the key as the class name
+					// and the value as the styles
+					...Object.keys(grids.grid).map((key) => {
+						return {
+							[`${key}`]: grids.grid[key],
+						}
+						// Reduce the mapped array of objects into a single object
+					}).reduce((gridsStyles, newGridsStyleObject) => ({ ...gridsStyles, ...newGridsStyleObject }), {}),
+					// Auto generate button classes from keys in tailwind-btns.json
+					// Loops through each key in the btns.style object and creates a new object with the key as the class name
+					// and the value as the styles
+					...Object.keys(btns.btn).map((key) => {
+						return {
+							[`${key}`]: btns.btn[key],
+						}
+						// Reduce the mapped array of objects into a single object
+					}).reduce((btnsStyles, newBtnsStyleObject) => ({ ...btnsStyles, ...newBtnsStyleObject }), {}),
+					// Loops through each key in the site spacing.style object and creates a new object with the key as the class
+					// name and the value as the styles
+					...Object.keys(site_spacing.spacing).map((key) => {
+						return {
+							[`${key}`]: site_spacing.spacing[key],
+						}
+						// Reduce the mapped array of objects into a single object
+					}).reduce((siteSpacingStyles, newSiteSpacingStyleObject) => ({ ...siteSpacingStyles, ...newSiteSpacingStyleObject }), {}),
+					// Auto generate block level spacing classes from keys in tailwind-site-spacing.json
+					// Loops through each key in the site_spacing.spacing object and creates a new object with the key as the
+					// class name and the value as the styles
+				});
 			}
 		)
-  ],
+	],
 }