village-hall
/
opnform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Upgrade to tailwind3

This commit is contained in:
JhumanJ 2022-10-17 13:35:54 +02:00
parent 2b45f3c3b1
commit d7ffb6233c
5 changed files with 338 additions and 781 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1067
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -48,7 +48,7 @@
"@babel/eslint-parser": "^7.15.0",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.15.0",
"autoprefixer": "^10.3.1",
"autoprefixer": "^10.4.12",
"cross-env": "^7.0.3",
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
@ -61,11 +61,11 @@
"laravel-mix": "^6.0.27",
"laravel-mix-bundle-analyzer": "^1.0.5",
"laravel-mix-versionhash": "2.0.1",
"postcss": "^8.3.6",
"postcss": "^8.4.18",
"resolve-url-loader": "^3.1.4",
"sass": "^1.37.5",
"sass-loader": "^10.2.0",
"tailwindcss": "^2.2.7",
"tailwindcss": "^3.1.8",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14"
}

6
resources/js/components/Navbar.vue
View File

@ -3,14 +3,14 @@
<div class="max-w-7xl mx-auto px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<router-link :to="{ name: user ? 'home' : 'welcome' }" class="flex-shrink-0 font-bold flex items-center">
<router-link :to="{ name: user ? 'home' : 'welcome' }" class="flex-shrink-0 font-semibold flex items-center">
<img :src="asset('img/logo.svg')" alt="notion tools logo" class="w-10 h-10">
<span
class="ml-2 text-xl hidden sm:inline text-black dark:text-white"
>
{{ appName }}</span><span
class="bg-gray-100 font-semibold inline-block mb-4 ml-1 px-3 rounded-full text-black text-xs tracking-wider"
>Beta</span>
class="bg-gray-100 text-gray-600 font-semibold inline-block mb-4 ml-1 px-3 rounded-full text-black text-xs tracking-wider"
>BETA</span>
</router-link>
<workspace-dropdown class="ml-6" />
</div>

39
tailwind.config.js vendored
View File

@ -1,28 +1,27 @@
const colors = require('tailwindcss/colors')
module.exports = {
mode: 'jit',
important: true,
purge: {
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue'
],
options: {
safelist: [
/.*bg-(nt-blue|blue|gray|red|yellow|green).*/, // Buttons
...['green', 'red', 'blue', 'yellow'].map((color) => ['bg-' + color + '-100', 'border-' + color + '-500']).flat() // Alerts
]
}
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue'
],
options: {
safelist: [
/.*bg-(nt-blue|blue|gray|red|yellow|green).*/, // Buttons
...['green', 'red', 'blue', 'yellow'].map((color) => ['bg-' + color + '-100', 'border-' + color + '-500']).flat() // Alerts
]
},
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {
keyframes: {
'bonce-slow': {
'0%, 20%': { transform: 'translateY(0)' },
'8%': { transform: 'translateY(-25%)' },
'16%': { transform: 'translateY(+10%)' }
'0%, 20%': {transform: 'translateY(0)'},
'8%': {transform: 'translateY(-25%)'},
'16%': {transform: 'translateY(+10%)'}
}
},
animation: {
@ -71,15 +70,5 @@ module.exports = {
}
}
},
variants: {
extend: {
animation: ['hover'],
brightness: ['hover', 'focus'],
invert: ['dark'],
maxWidth: ['hover'],
display: ['group-hover', 'dark'],
rotate: ['group-hover']
}
},
plugins: []
}

1
webpack.mix.js vendored
View File

@ -13,7 +13,6 @@ mix
processCssUrls: false,
postCss: [tailwindcss('./tailwind.config.js')]
})
.disableNotifications()
if (mix.inProduction()) {