Projects not saving
Hi Ben,
Are you seeing any errors in the Web console?
It sounds like a browser extension that you have might be causing the problem.
In case that you are getting any errors in the console, can you share them here?
Do you have an add blocker or some kind of JSON parser extensions? If so can you try disabling them and see if the problem persists?
Best,
Bobby
Hey Bobby,
Thank you for the fast reply. I just checked no errors at all. Not sure if you can access my project(there is only 1), but if you try to change the words "web design" which are purple to text-yellow-500, you will notice that even after the save, if you go out and in the project again, the color will be purple and not yellow.
This happens with anything you may change, even images, text, colors and so on.
From what I can see, no saves are happening. Even the sort order of the blocks is not being saved.
It seems that I am having the same problem than this user: https://devdojo.com/question/tails-apparently-it-doesnt-save-the-changes
Hi there,
As far as I can see the problem was caused by a syntax error in your Tailwind Config. There was this error in the web console:
Uncaught ReferenceError: defaultTheme is not defined
When using a custom Tailwind CSS config you need to make sure that the syntax is correct. We will look into adding some warnings in there to point out when there are problems with the custom config.
Try out with the Adamant Medical Azure project and it should be working as expected.
Thanks, This is my config, but your software won't let me paste anything above the module.exports. Very strange about the console error as I could not see anything from my side.
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = { <-------------here
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
'./node_modules/flowbite/**/*.js',
'./src/**/*.{html,js}',
'./node_modules/tw-elements/dist/js/**/*.js'
],
safelist: [
'mx-auto',
'max-w-7xl',
'grid',
'justify-items-stretch',
'text-2xl',
'text-3xl',
'text-4xl',
'font-bold',
'tracking-tight',
'text-gray-900',
'justify-self-start',
'justify-self-end',
'lg:flex',
'lg:items-center',
'lg:justify-between',
'hover:transition',
'hover:duration-300',
'hover:scale-105',
'transition',
'duration-300',
'scale-105',
],
theme: {
extend: {
fontFamily: {
montserrat: ['Montserrat'],
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
},
colors: {
transparent: 'transparent',
current: 'currentColor',
'facebook': '#3b5998',
'twitter': '#00acee',
'linkedin': '#0072b1',
'whatsapp': '#25D366',
'instagram': '#E4405F',
'youtube': '#FF0000',
'yellow': '#FFDD03',
'yellow-form': '#FFDD0366',
"red": {
"50": "#fe3232",
"100": "#f42828",
"200": "#ea1e1e",
"300": "#e01414",
"400": "#d60a0a",
"500": "#cc0000",
"600": "#c20000",
"700": "#b80000",
"800": "#ae0000",
"900": "#a40000"
},
"teal": {
"50": "#72e2f1",
"100": "#68d8e7",
"200": "#5ecedd",
"300": "#54c4d3",
"400": "#4abac9",
"500": "#40b0bf",
"600": "#36a6b5",
"700": "#2c9cab",
"800": "#2292a1",
"900": "#188897"
},
"green": {
"50": "#ffffbd",
"100": "#f5ffb3",
"200": "#ebffa9",
"300": "#e1ff9f",
"400": "#d7f595",
"500": "#cdeb8b",
"600": "#c3e181",
"700": "#b9d777",
"800": "#afcd6d",
"900": "#a5c363"
},
"blue": {
"50": "#72c8ff",
"100": "#68beff",
"200": "#5eb4ff",
"300": "#54aaff",
"400": "#4aa0f8",
"500": "#4096ee",
"600": "#368ce4",
"700": "#2c82da",
"800": "#2278d0",
"900": "#186ec6"
},
"orange": {
"50": "#ffa632",
"100": "#ff9c28",
"200": "#ff921e",
"300": "#ff8814",
"400": "#ff7e0a",
"500": "#ff7400",
"600": "#f56a00",
"700": "#eb6000",
"800": "#e15600",
"900": "#d74c00"
},
"black": {
"50": "#565555",
"100": "#4c4b4b",
"200": "#424141",
"300": "#383737",
"400": "#2e2d2d",
"500": "#242323",
"600": "#1a1919",
"700": "#100f0f",
"800": "#060505",
"900": "#000000"
}
},
rotate: {
'5': '5deg',
},
keyframes: {
'fade-in': {
'0%': {
opacity: '0',
},
'100%': {
opacity: '1',
},
},
'fade-out': {
'100%': {
opacity: '1',
},
'0%': {
opacity: '0',
},
},
'roll-in-blurred-right': {
"0%": {
transform: "translateX(1000px) rotate(720deg)",
filter: "blur(50px)",
opacity: "0"
},
to: {
transform: "translateX(0) rotate(0deg)",
filter: "blur(0)",
opacity: "1"
}
}
},
animation: {
'fade-in': 'fade-in 0.5s',
'slow-fade-in': 'fade-in 1s',
'fade-out': 'fade-out 0.5s',
'slow-fade-out': 'fade-out 1s',
'roll-in-blurred-right': 'roll-in-blurred-right 0.65s cubic-bezier(0.230, 1.000, 0.320, 1.000) both'
},
},
},
variants: {
extend: {},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
require("daisyui"),
require('flowbite/plugin'),
require('tw-elements/dist/plugin')
],
}
Hi there Ben,
Yes, this is the error that I saw in the console log:
It should work as expected after removing this line:
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
Can you verify if this is the case?
I checked everything, I cannot find anything wrong with my code as it is based on this config: https://tailwindcss.com/docs/theme#referencing-the-default-theme
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
fontFamily: {
sans: [
'Lato',
...defaultTheme.fontFamily.sans,
]
}
}
}
}
But your script does not allow anything above this:
module.exports = {}
So I think ths issue is that you are seeing a bug here:
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
Because this is missing in in the config on your website:
const defaultTheme = require('tailwindcss/defaultTheme')
What I was saying earlier is that your script won't allow this kind of configuration as I cannot paste anything above the module.exports = {}
I hope I explained it properly.
Hey Ben,
Yes indeed, currently referencing the default theme is not possible.
While we look into this, if you remove the line then the editor should work as expected. And you can specify the values that you need explicitly.
Let me know if anything else pops up in the meantime!