Customise Tailwind, and interaction variants

This commit is contained in:
Oliver Davies 2021-01-16 19:09:10 +00:00
parent 66bc88c55b
commit fbfe945408
4 changed files with 42 additions and 0 deletions

View file

@ -14,6 +14,7 @@
"core-js": "^3.6.5",
"postcss": "^7",
"tailwindcss": "npm:@tailwindcss/postcss7-compat",
"tailwindcss-interaction-variants": "^5.0.0",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^9.1.2",

View file

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
</head>
<body>
<noscript>

32
tailwind.config.js Normal file
View file

@ -0,0 +1,32 @@
const { variants } = require('tailwindcss/defaultConfig');
const { fontFamily } = require('tailwindcss/defaultTheme');
const variationPlugin = require('tailwindcss-interaction-variants');
module.exports = {
theme: {
rotate: {
'-90': '-90deg'
},
extend: {
colors: {
charade: '#2a293c',
'gun-powder': '#414054',
inherit: 'inherit',
periwinkle: '#d8e2f0'
},
fontFamily: {
sans: [
'Open Sans',
...fontFamily.sans
]
}
}
},
variants: {
backgroundColor: [...variants.backgroundColor, 'hocus', 'group-hocus'],
textDecoration: [...variants.textDecoration, 'group-hover', 'hocus', 'group-hocus']
},
plugins: [
variationPlugin
]
}

View file

@ -9565,6 +9565,14 @@ table@^5.2.3:
slice-ansi "^2.1.0"
string-width "^3.0.0"
tailwindcss-interaction-variants@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/tailwindcss-interaction-variants/-/tailwindcss-interaction-variants-5.0.0.tgz#8e0825dfa4b2a81804cbae536915e48a85e96580"
integrity sha512-Tmx9HjwuNA3G7cLUcebGkNchKkNVIZXBroxa0LBoq/KUb/xEKEM8qugUG7QczSNPhaZzpXmo3IzPkRhf4tDaOQ==
dependencies:
lodash "^4.17.19"
postcss-selector-parser "^6.0.2"
tapable@^1.0.0, tapable@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"