ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add tailwind plugin for using grid template areas

This commit is contained in:
Ramon Wenger 2023-01-19 14:34:18 +01:00 committed by Christian Cueni
parent 8f202aa4b6
commit cb290a6fbc
3 changed files with 39 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
client/package-lock.json generated
View File

@ -27,6 +27,7 @@
"@graphql-codegen/client-preset": "^1.1.4", "@graphql-codegen/client-preset": "^1.1.4",
"@rollup/plugin-alias": "^3.1.9", "@rollup/plugin-alias": "^3.1.9",
"@rushstack/eslint-patch": "^1.1.4", "@rushstack/eslint-patch": "^1.1.4",
"@savvywombat/tailwindcss-grid-areas": "^3.0.0",
"@tailwindcss/forms": "^0.5.2", "@tailwindcss/forms": "^0.5.2",
"@tailwindcss/typography": "^0.5.4", "@tailwindcss/typography": "^0.5.4",
"@testing-library/vue": "^6.6.1", "@testing-library/vue": "^6.6.1",
@ -2765,6 +2766,21 @@
"integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==", "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==",
"dev": true "dev": true
}, },
"node_modules/@savvywombat/tailwindcss-grid-areas": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@savvywombat/tailwindcss-grid-areas/-/tailwindcss-grid-areas-3.0.0.tgz",
"integrity": "sha512-2Bc/7y2Vd0zm16AKX/gyaj+2zPV1VkD9w1YYgC1A9NpN9ybJLQTbS1SBXmiGfyDwN5XaaO1cFJsCzwkljUN6oQ==",
"dev": true,
"dependencies": {
"lodash": "^4.17.21"
},
"engines": {
"node": ">=14.18.2"
},
"peerDependencies": {
"tailwindcss": "^3.0.1"
}
},
"node_modules/@sentry/browser": { "node_modules/@sentry/browser": {
"version": "7.20.0", "version": "7.20.0",
"resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.20.0.tgz", "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.20.0.tgz",
@ -13751,6 +13767,15 @@
"integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==", "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==",
"dev": true "dev": true
}, },
"@savvywombat/tailwindcss-grid-areas": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/@savvywombat/tailwindcss-grid-areas/-/tailwindcss-grid-areas-3.0.0.tgz",
"integrity": "sha512-2Bc/7y2Vd0zm16AKX/gyaj+2zPV1VkD9w1YYgC1A9NpN9ybJLQTbS1SBXmiGfyDwN5XaaO1cFJsCzwkljUN6oQ==",
"dev": true,
"requires": {
"lodash": "^4.17.21"
}
},
"@sentry/browser": { "@sentry/browser": {
"version": "7.20.0", "version": "7.20.0",
"resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.20.0.tgz", "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.20.0.tgz",

1
client/package.json
View File

@ -34,6 +34,7 @@
"@graphql-codegen/client-preset": "^1.1.4", "@graphql-codegen/client-preset": "^1.1.4",
"@rollup/plugin-alias": "^3.1.9", "@rollup/plugin-alias": "^3.1.9",
"@rushstack/eslint-patch": "^1.1.4", "@rushstack/eslint-patch": "^1.1.4",
"@savvywombat/tailwindcss-grid-areas": "^3.0.0",
"@tailwindcss/forms": "^0.5.2", "@tailwindcss/forms": "^0.5.2",
"@tailwindcss/typography": "^0.5.4", "@tailwindcss/typography": "^0.5.4",
"@testing-library/vue": "^6.6.1", "@testing-library/vue": "^6.6.1",

13
client/tailwind.config.js
View File

@ -37,6 +37,18 @@ module.exports = {
borderColor: (theme) => ({ borderColor: (theme) => ({
DEFAULT: theme("colors.gray.500"), DEFAULT: theme("colors.gray.500"),
}), }),
gridTemplateAreas: {
"horizontal-bar-chart": [
"y-axis . left-chart . right-chart .",
"y-axis . left-label . right-label .",
],
},
gridTemplateColumns: {
"horizontal-bar-chart": "50px 1fr 300px 4fr 300px 1fr",
},
gridTemplateRows: {
"horizontal-bar-chart": "200px 40px",
},
}, },
colors: colors, colors: colors,
}, },
@ -53,5 +65,6 @@ module.exports = {
require("@tailwindcss/typography"), require("@tailwindcss/typography"),
require("@tailwindcss/forms"), require("@tailwindcss/forms"),
require("@headlessui/tailwindcss"), require("@headlessui/tailwindcss"),
require("@savvywombat/tailwindcss-grid-areas"),
], ],
}; };