RFC: Tailwind Support #20030
Replies: 17 comments 23 replies
-
|
There are other systems like https://github.com/Arthie/xwind and (maybe?) https://github.com/ben-rogerson/twin.macro where a tailwind config exists but things are all processed very differently through a CSS-in-JS solution. Would the "auto-enable" increase any sort of bundle sizes at the mere detection of a tailwind config? Is there a way to opt-out? |
Beta Was this translation helpful? Give feedback.
-
|
We can automatically opt-out for those cases |
Beta Was this translation helpful? Give feedback.
-
|
Hey, I'm the maintainer of xwind feel free to reach out if u need any help/feedback with the opt-out. For those wondering what the difference is in approach between Tailwind and xwind:Tailwind approach:
xwind approach:
One of the advantages of xwind's approach is the possibility to configure the output to your preferred CSS solution:
|
Beta Was this translation helpful? Give feedback.
-
|
Very interested in tw twin.macro (emotion with |
Beta Was this translation helpful? Give feedback.
-
|
Everything sounds great. What will be the strategy so that this integration does not increase the weight of the |
Beta Was this translation helpful? Give feedback.
-
|
Is the weight of the |
Beta Was this translation helpful? Give feedback.
-
|
As said in the RFC you have to manually install tailwind into your project so it does not impact Next.js' size.
Overall we try to optimize the package size as much as possible to ensure the package installs faster. |
Beta Was this translation helpful? Give feedback.
-
|
Low on storage space? |
Beta Was this translation helpful? Give feedback.
-
|
This is awesome! How will next handle custom Sounds like it will just assume the default base, components, and utilities setup behind the and if we want to customize it we make and import the file(s) as normal? |
Beta Was this translation helpful? Give feedback.
-
|
Will this support only Tailwind 2, or Tailwind 1 included? (Since Tailwind 2 doesn't support IE11, this is kinda important.) |
Beta Was this translation helpful? Give feedback.
-
|
AFAIK there’s no PostCSS config difference between v1 and v2 and the presence of a Tailwind config file isn’t dependent on a particular version of Tailwind. |
Beta Was this translation helpful? Give feedback.
-
|
It will probably install latest, but you could change package.json to 1.9.6 if you want. Everything else should operate the same. |
Beta Was this translation helpful? Give feedback.
-
Installing your desired version of tailwindcss is still being suggested at the first step. |
Beta Was this translation helpful? Give feedback.
-
|
Would you support/what about supporting styled-jsx @apply rules too? I managed to get it working via https://github.com/giuseppeg/styled-jsx-plugin-postcss And now I can write things like: <style jsx>{`
div[aria-selected="true"] {
@apply text-white bg-indigo-500;
}
}</style>Which is very handy in situations where nor className= nor style= are sufficient and you still want to use tailwind classes |
Beta Was this translation helpful? Give feedback.
-
|
You can always use CSS modules, but I agree the flexibility of styled-jsx comes in handy sometimes. |
Beta Was this translation helpful? Give feedback.
-
|
Not planning on it currently. |
Beta Was this translation helpful? Give feedback.
-
Hi @DaniGuardiola, can you use @apply in CSS modules? Any configuration needed? Seems interesting indeed instead of styled-jsx in this case. |
Beta Was this translation helpful? Give feedback.
-
|
@vvo I know it's possible because I did it once, but I can't recall whether it requires any additional config beyond what's already required for Tailwind. |
Beta Was this translation helpful? Give feedback.
This comment was marked as spam.
This comment was marked as spam.
-
|
Maybe a bit out of scope, but what about a command that setups everything for you:
Something like |
Beta Was this translation helpful? Give feedback.
-
|
Well, I don't think there'd be much of an advantage, and this way it's consistent with, for example, how you setup TypeScript. |
Beta Was this translation helpful? Give feedback.
-
|
Tailwind has a pretty thorough guide on how to add TailwindCSS to a Next.js app, it pretty much already is just one command, after the installations. |
Beta Was this translation helpful? Give feedback.
-
|
What about amp support? |
Beta Was this translation helpful? Give feedback.
-
|
How would purging work in this case? By looking into directories such as Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Purging is done through Tailwind itself and the |
Beta Was this translation helpful? Give feedback.
-
|
How to use |
Beta Was this translation helpful? Give feedback.
-
|
I assume all CSS files will be processed through PostCSS and |
Beta Was this translation helpful? Give feedback.
-
|
Does it include https://github.com/tailwindlabs/headlessui support? |
Beta Was this translation helpful? Give feedback.
-
|
Headless UI is not dependent on Tailwind at all |
Beta Was this translation helpful? Give feedback.
-
|
Would this work with SSR? Can it collect styles in the same way that MUI and StyledComponents do with ServerStyleSheets? |
Beta Was this translation helpful? Give feedback.
-
|
Tailwind always works with SSR because it creates a plain old CSS stylesheet at build time. No fancy JS runtime thing. |
Beta Was this translation helpful? Give feedback.
-
|
Ah ok, makes sense, thanks @leodr |
Beta Was this translation helpful? Give feedback.
-
|
You can use https://github.com/ben-rogerson/twin.macro. |
Beta Was this translation helpful? Give feedback.
-
|
Does Next.js's code splitting work on Tailwind today? If not, that would be wonderful first-party support to get Tailwind's size down even more. |
Beta Was this translation helpful? Give feedback.
-
|
Let's make sure Tailwind support can handle very large files w/ dark mode in a memory-efficient way (related #21529). Edit: Sovled! See below. |
Beta Was this translation helpful? Give feedback.
-
|
Will @tailwindcss/jit help solve this problem? |
Beta Was this translation helpful? Give feedback.
-
|
Yep - we can consider this solved 😄 |
Beta Was this translation helpful? Give feedback.
-
|
What about recipes like in blitz that handles tailwind setup? it is completely opt-in and won't affect who don't use it |
Beta Was this translation helpful? Give feedback.
-
|
Just leaving this here... https://github.com/tailwindlabs/tailwindcss-jit |
Beta Was this translation helpful? Give feedback.
-
|
Hey y'all! There's been many updates since we first announced this RFC:
Since the original goals have been satisfied with improvements to Tailwind and further improvements coming with v4, we are going to close this RFC. Thank you all for the feedback and excitement. |
Beta Was this translation helpful? Give feedback.
and others
-
Edit: #20030 (comment)
Goals
postcss.config.jsand auto-inject TailwindCSSBackground
Utility-first CSS is gaining a lot of adoption over the past few months. This is especially driven by the rise in usage of the Tailwind CSS framework. One of the most useful things about using Tailwind in comparison to other CSS frameworks is that it tree shakes itself away as much as possible, meaning it exposes a lot of classes but only the ones that you use will be bundled into the production CSS file, giving you a small CSS bundle compared to writing all styles yourself.
Setting up Tailwind takes quite a few steps:
pages/_app.jsthat imports a stylesheet.@tailwinddirectives to inject the Tailwind styles.postcss.config.jsand includetailwindcssand all the PostCSS plugins Next.js has by default.Given the rise in usage, it makes sense for Next.js to make this setup simpler.
Resources:
Implementation
tailwind.config.jsit automatically sets up Tailwind for younpm install tailwindcssand thennpx tailwindcss init.postcss.config.jsis added (this is currently required to set up Tailwind correctly so it's a good measure to prevent breaking).Beta Was this translation helpful? Give feedback.
All reactions