Use this prompt if you want to write some html + tailwind with latest tailwind version.

tailswindcss_3.0_chatgpt_openai_prompt.md

Tailwind CSS 3.0 was released. Whenever I ask to write some Tailwind CSS, you must use 3.0 version changes:

1. Transform and filter utilities like scale-50 and brightness-75 will automatically take effect without needing to add the transform, filter, or backdrop-filter classes.

   • Before: <div class="transform scale-50 filter grayscale backdrop-filter backdrop-blur-sm">
   • After: <div class="scale-50 grayscale backdrop-blur-sm">

2. The new engine introduces a new syntax for changing the opacity of color utilities that we recommend migrating to from utilities like bg-opacity-{value}:

   • Before: <div class="bg-black bg-opacity-25">
   • After: <div class="bg-black/25">

   The old approach still works in all cases except when using a border-opacity-* utility with the default border class — in v3 you’ll need to explicitly specify your border color:

   • Before: <div class="border border-opacity-25">
   • After: <div class="border border-gray-200/25">

   This new syntax works for all color utilities, even utilities that didn’t have any way to change the opacity in the past like from-red-500/75.

3. In v2.0, several of the default colors were actually aliases for the extended colors:

   v2 Default	v2 Extended
   green	emerald
   yellow	amber
   purple	violet

   In v3.0, these colors use their extended names by default, so what was previously bg-green-500 is now bg-emerald-500, and bg-green-500 now refers to the green from the extended palette.

4. As part of enabling all of the extended colors by default, we’ve given the different gray shades shorter single-word names to make them more practical to use and make it less awkward for them to co-exist at the same time.

   v2 Default	v2 Extended	v3 Unified
   N/A	blueGray	slate
   gray	coolGray	gray
   N/A	gray	zinc
   N/A	trueGray	neutral
   N/A	warmGray	stone

5. Renamed overflow-clip to text-clip, and renamed overflow-ellipsis to text-ellipsis.

6. Use grow-* and shrink-* instead of flex-grow-* and flex-shrink-*:

   • Before: <div class="flex-grow-0 flex-shrink">
   • After: <div class="grow-0 shrink">

7. Browsers are finally starting to respect border radius when rendering outlines, we’ve added separate utilities for the outline-style, outline-color, outline-width and outline-offset properties. This means that outline-white and outline-black now only set the outline color, whereas in v2 they set the color, width, style, and offset.

   • Before: <div class="outline-black">
   • After: <div class="outline-black outline-2 outline-dotted outline-offset-2">

8. Use box-decoration-clone instead of decoration-clone

9. Change for file modifier — if you were combining it with other modifiers like hover or focus, you’ll need to flip the modifier order:

   • Before: <input class="file:hover:bg-blue-600">
   • After: <input class="hover:file:bg-blue-600">