Closed barvian closed 1 week ago
Hi, could you post your Tailwind config?
It's kind of big, so I removed the color and font declaration. tailwind.config.ts:
import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'
import colors from 'tailwindcss/colors'
import fluid, { extract, screens } from 'fluid-tailwind'
import typography from '@tailwindcss/typography'
import forms from '@tailwindcss/forms'
import containerQueries from '@tailwindcss/container-queries'
export default <Partial<Config>>(<unknown>{
content: {
extract,
},
corePlugins: {
clear: false,
space: false,
},
darkMode: 'class',
theme: {
screens,
backgroundSize: {
gridLine: '100% 30px',
},
spacing: {
'0': '0px',
px: '1px',
'0.5': '2px',
'1': '0.3125rem',
'1.5': '0.5rem',
'2': '0.625rem',
'2.5': '0.75rem',
'3': '0.9375rem',
'3.5': '1rem',
'4': '1.25rem',
'5': '1.5625rem',
'6': '1.875rem',
'7': '2.1875rem',
'8': '2.5rem',
'9': '2.8125rem',
'10': '3.125rem',
'11': '3.4375rem',
'12': '3.75rem',
'14': '4.375rem',
'16': '5rem',
'20': '6.25rem',
'24': '7.5rem',
'28': '26.25rem',
'32': '10rem',
'36': '11.25rem',
'40': '12.5rem',
'44': '13.75rem',
'48': '15rem',
'52': '16.25rem',
'56': '17.5rem',
'60': '18.75rem',
'64': '20rem',
'72': '22.5rem',
'80': '25rem',
'96': '30rem',
},
extend: {
fontSize: {
xs: ['0.666666666667rem', 'inherit'],
sm: ['1rem', '1.875rem'],
base: [
'1.125rem',
{
lineHeight: '1.875rem',
fontWeight: '500',
},
],
lg: [
'1.313rem',
{
lineHeight: '1.875rem',
letterSpacing: '0',
fontWeight: '600',
},
],
xl: [
'1.813rem',
{
lineHeight: '1.875rem',
letterSpacing: '0',
fontWeight: '800',
},
],
'2xl': [
'2.938rem',
{
lineHeight: '3.75rem',
letterSpacing: '0',
fontWeight: '800',
},
],
'3xl': [
'4.75rem',
{
lineHeight: '5.625rem',
letterSpacing: '0',
fontWeight: '800',
},
],
'4xl': [
'5.3125rem',
{
lineHeight: '5.625rem',
letterSpacing: '0.01em',
fontWeight: '800',
},
],
dlg: [
'1.313rem',
{
lineHeight: '1.875rem',
letterSpacing: '0.01em',
fontWeight: '200',
},
],
dxl: [
'1.813rem',
{
lineHeight: '1.875rem',
letterSpacing: '0.01em',
fontWeight: '200',
},
],
d2xl: [
'2.938rem',
{
lineHeight: '3.75rem',
letterSpacing: '0.01em',
fontWeight: '200',
},
],
d3xl: [
'4.75rem',
{
lineHeight: '3.75rem',
letterSpacing: '0.01em',
fontWeight: '200',
},
],
},
lineHeight: {
'leading-normal': '1.666',
},
aspectRatio: {
auto: 'auto',
square: '1 / 1',
video: '16 / 9',
screen: '4 / 3'
},
gradientColorStartPositions: {
'1px': '1px',
},
gradientColorStopPositions: {
'1px': '1px',
'120px': '120px',
'122px': '122px',
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
keyframes: {
blob: {
'0%': {
translate: '0 0',
rotate: '0deg',
},
'30%': {
rotate: '40deg',
},
'50%': {
transform: 'translate(300px, 390px) scale(1.1)',
},
'80%': {
rotate: '90%',
},
},
fadeIn: {
'0%': {
opacity: '0',
},
'100%': {
opacity: '1',
},
},
},
animation: {
borderSpin: 'borderSpin 3s linear infinite',
blob: 'blob 20s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045)',
'blob-reverse':
'blob 28s infinite cubic-bezier(0.215, 0.61, 0.355, 1) reverse',
fadeIn: 'fadeIn 1s normal cubic-bezier(0.4, 0, 0.2, 1)'
},
boxShadow: {
'sticker': '0 0 8px 4px rgba(0, 0, 0, 0.15)',
}
},
},
safelist: [
{
pattern: /ring-secondary-[^/]+$/,
variants: 'dark',
},
{
pattern: /bg-secondary-[^/]+$/,
variants: 'dark',
},
{
pattern: /text-primary-[^/]+$/,
variants: 'dark',
},
],
plugins: [
typography,
forms,
containerQueries,
fluid,
],
})
Thanks, are you using @nuxtjs/tailwindcss
too?
yes via Nuxt UI
"node_modules/@nuxt/ui": {
"version": "2.18.7",
...
"dependencies": {
"@headlessui/tailwindcss": "^0.2.1",
"@headlessui/vue": "^1.7.23",
"@iconify-json/heroicons": "^1.2.1",
"@nuxt/icon": "^1.5.5",
"@nuxt/kit": "^3.13.2",
"@nuxtjs/color-mode": "^3.5.1",
"@nuxtjs/tailwindcss": "^6.12.1",
"@popperjs/core": "^2.11.8",
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/container-queries": "^0.1.1",
"@tailwindcss/forms": "^0.5.9",
"@tailwindcss/typography": "^0.5.15",
"@vueuse/core": "^11.1.0",
"@vueuse/integrations": "^11.1.0",
"@vueuse/math": "^11.1.0",
"defu": "^6.1.4",
"fuse.js": "^7.0.0",
"ohash": "^1.1.4",
"pathe": "^1.1.2",
"scule": "^1.3.0",
"tailwind-merge": "^2.5.3",
"tailwindcss": "^3.4.13"
}
},
Hi, I also get the same error in both 3.14.0 and the current latest 3.14.159.
And yes, I'm also using @nuxt/tailwindcss
via nuxt/ui
Hi, I just pushed fluid-tailwind@1.0.4
which should fix this. Please comment if you're still experiencing issues 👍
Seems to be resolved! Thank you!
I got a build error, now after upgrading to nuxt 3.14.0
I'm using Nuxt UI
got it when running
npm run dev
.Originally posted by @martijndewit in https://github.com/barvian/fluid-tailwind/issues/50#issuecomment-2457237937