Solved
ben1980

Dec 20th, 2022 03:25 AM

Hi admins,

My projects are not being saved. Any change I do are reverted when I reload the projects. I deleted, created the projects, same issue.

Thank you,

Ben

bobbyiliev

Dec 20th, 2022 03:27 AM

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

ben1980

Dec 20th, 2022 03:31 AM

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

bobbyiliev

Dec 20th, 2022 03:49 AM

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.

ben1980

Dec 20th, 2022 05:19 AM

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')
    ],
}
bobbyiliev

Dec 20th, 2022 06:17 AM

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?

tnylea

Dec 20th, 2022 06:58 AM

I've also recently fixed a bug inside of Tails that was preventing users from saving in some weird use-cases. Just wanted to let y'all know 👏

Report
2
ben1980

Dec 20th, 2022 11:59 AM

Sorry for the delay in reply, will check everything out very soon, thank you so much for your great help! I will post back in the next 4 hours.

ben1980

Dec 21st, 2022 11:43 AM

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.

bobbyiliev

Dec 22nd, 2022 01:22 AM

Best Answer

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!

ben1980

Dec 23rd, 2022 06:01 AM

Thanks Boddy, yes I did that for now.

I will mark this as answered!

Thank you and happy week end!