tailwind css - How can I convert print: and screen: to the new @theme{} style? - Stack Overflow

admin管理员组

文章数量:1296451

In my Tailwind.config.js from v3 I have this

 screens: {
    print: { raw: "print" },
    screen: { raw: "screen" },
  },

How can I convert that the new @theme {} style?

In my Tailwind.config.js from v3 I have this

 screens: {
    print: { raw: "print" },
    screen: { raw: "screen" },
  },

How can I convert that the new @theme {} style?

• tailwind-css
• tailwind-css-4

Share Improve this question Follow edited Feb 12 at 6:25 DarkBee 15.6k88 gold badges7272 silver badges116116 bronze badges asked Feb 12 at 2:45 Ian VinkIan Vink 68.8k107107 gold badges352352 silver badges567567 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

From v4 onwards, the @screen variant has been removed in the CSS-first configuration and replaced with @custom-variant, which allows you to create any variant:

@custom-variant custom-screen (@media screen);
@custom-variant custom-print (@media print);

custom-screen:bg-blue-100 custom-print:bg-red-100

In CSS, you can use the @variant directive to reference both the default and custom variants you create.

.my-element {
  background-color: white;

  @variant custom-screen {
    background-color: blue;
  }
  @variant custom-print {
    background-color: red;
  }
}

• TailwindCSS @screen how to use

However, starting from TailwindCSS v4, the print and orientation directives have been introduced by default.

hidden print:block portrait:bg-blue-100 landscape:bg-red-100

.my-element {
  background-color: white;

  @variant portrait {
    background-color: blue;
  }
  @variant landscape {
    background-color: red;
  }
}

If the CSS-first settings are not appealing, there is an option to use the legacy JavaScript-based configuration through the @config directive.

• TailwindCSS v4 is backwards compatible with v3

You can use the @custom-variant directive like:

@custom-variant print (@media print);
@custom-variant screen (@media screen);

Though really, you don't need the print one as it is built in to v4 already.

本文标签： tailwind cssHow can I convert print and screen to the new theme styleStack Overflow