Problem with alignment with ul element. Different in development and production mode.

[nevil2]

What version of Tailwind CSS are you using?

4.0.0-beta.6

What build tool (or framework if it abstracts the build tool) are you using?

vite 6.0.3, @tailwindcss/vite 4.0.0-beta.6, @sveltejs/kit 2.10.1

What version of Node.js are you using?

v22.11.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

<ul class="list-disc">
    {#each participants as participant}
        <li>{participant}</li>
    {/each}
</ul>

Describe your issue

Problem with alignment with ul element. Different in development and production mode.

In development mode:

In preview or production mode (after build):

Development and production mode should have same formatting. Problem is independent of browser or operating system.

[philipp-spiess]

Hey! Just tried this here with no other styles and this is working as expected for me (first screenshot is dev mode, second full build, both using Vite):

Are you able to reproduce this in a new Vite setup?

[nevil2]

I've tested with a blank SvelteKit project, with index.ccs (imported by Svelte component) as follows:

@import "tailwindcss";

@layer base {
  html {
    font-size: 24px;
  }

  ul {
    list-style: inside;
    list-style-type: disc;
  }
} 

The problem is list-style: inside; which in development is interpreted as:

list-style-position: inside;
list-style-image: initial;

but is not recognised in production mode.

So the following works correctly in both modes.

@import "tailwindcss";

@layer base {
  html {
    font-size: 24px;
  }

  ul {
    list-style-position: inside;
    list-style-image: initial;
    list-style-type: disc;
  }
}

Should Tailwind support list-style: inside? It did previously.

Can push code to GIT if you need.

[philipp-spiess]

Oh, gotcha! Thanks for the bit about list-style: inside. This seems to be an issue in lightningcss. Let me file a quick bug report there so we can get this resolved upstream.

[philipp-spiess]

Filed as parcel-bundler/lightningcss#867

[philipp-spiess]

To make this work in the meantime you can manually set list-style-position: inside; instead of list-style: inside;: https://lightningcss.dev/playground/index.html#%7B%22minify%22%3Afalse%2C%22customMedia%22%3Atrue%2C%22cssModules%22%3Afalse%2C%22analyzeDependencies%22%3Afalse%2C%22targets%22%3A%7B%22chrome%22%3A6225920%7D%2C%22include%22%3A0%2C%22exclude%22%3A0%2C%22source%22%3A%22%5Cn.foo%20%7B%5Cn%20%20list-style-position%3A%20inside%3B%5Cn%20%20list-style-type%3A%20disc%3B%5Cn%7D%22%2C%22visitorEnabled%22%3Afalse%2C%22visitor%22%3A%22%7B%5Cn%20%20Color(color)%20%7B%5Cn%20%20%20%20if%20(color.type%20%3D%3D%3D%20'rgb')%20%7B%5Cn%20%20%20%20%20%20color.g%20%3D%200%3B%5Cn%20%20%20%20%20%20return%20color%3B%5Cn%20%20%20%20%7D%5Cn%20%20%7D%5Cn%7D%22%2C%22unusedSymbols%22%3A%5B%5D%2C%22version%22%3A%22local%22%7D