-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Enable ESM and TS based config files #10785
Conversation
Instead of `detective`, this way we will be able to support `tailwind.config.ts` files and `ESM` files.
1758789
to
bb3c480
Compare
TODO: Test all combinations of `--full`, `--ts`, `--postcss`, and `--esm`.
bb3c480
to
9bcf8ba
Compare
A little smaller but just for tests so doesn't matter too much here 👍
Super happy we finally have this, great job guys ❤️ Tested with two medium projects:
Everything works perfectly fine, migration is easy. Super nice. I've noticed zIndex: {
'sticky-on-scroll': 20,
'chat-bubble': 30,
'navbar': 30,
'navbar-dropdown': 25,
'dialog-base': 35,
'dialog-panel': 36,
'notification': 50,
}, But I had to make the values strings instead of numbers. Using The only thing I miss is a Thank you for this! ❤️ |
tailwindlabs/tailwindcss#10785 Signed-off-by: Logan McAnsh <[email protected]>
tailwindlabs/tailwindcss#10785 Signed-off-by: Logan McAnsh <[email protected]>
tailwindlabs/tailwindcss#10785 Signed-off-by: Logan McAnsh <[email protected]>
hi, has this been released? i'm trying to get the TS and ESM js config to work but it doesn't. |
@woss no not yet, it will be soon though! If you want to know what's released and what isn't you can always take a look at the CHANGELOG.md file. That said, you can already play with it using the insiders version: |
This looks great, thanks for this @RobinMalfait 🙌 Since the current version number is |
Thank you @RobinMalfait this is a long awaited feature I've been waiting for! Happy early birthday to me! |
Thank you all for this feature! This is exactly what I needed for my project, I appreciate all the hard work! One thing that is unclear to me and isn't addressed in the documentation, is how do I import the Tailwind colors into my ESM config file? None of these work
|
Hello, How to add Like this? const defaultTheme = require('tailwindcss/defaultTheme');
const plugin = require('tailwindcss/plugin'); |
The more common style is import defaultTheme from 'tailwindcss/defaultTheme';
import plugin from 'tailwindcss/plugin'; Often your editor / IDE can do this conversion for you like Convert 'require' to 'import' in VS Code (either use the lightbulb or hover over the three dots -> Quick Fixes -> "Convert 'require' to 'import'") |
@klib19 while I wouldn't recommend to mix everything. All three of those should just work: If you are experiencing issues then I would recommend to open an issue with a minimal reproduction repo attached that shows the issue. @seb-jean as @karlhorky mentioned, you would use the |
thanks @RobinMalfait |
Hi. Jiti maintainer here. Excellent work and glad that tailwind is using jiti for TS/ESM support 🔥 Please let me know if there were any issues or possible improvements. |
It would be really great if it was somehow documented in the official documentation on the website. We literally burnt a few hours trying to make this work. Here's my steps:
Example: -padding: (theme) => theme("spacing")
+padding: (plugin) => plugin.theme("spacing")
Whole diff:
Hope that helps somebody! |
This PR adds support for loading and scaffolding ESM and TypeScript config files.
ESM and TS syntax support
Prior to this PR, your
tailwind.config.js
file had to be in CommonJS format. This was surprising to people using"type": "module"
in their projects, and made it more difficult to do things like extract your theme tokens into a separate module that you could import into yourtailwind.config.js
as well as into your application code to maintain a single source of truth.To make this work, we need to transpile ESM and TS config files on the fly (using jiti), since Tailwind itself isn't published in native ESM and of course there's no native TS support in Node.js. This means there is a performance penalty to using ESM and TS config files, which we're mitigating as much as possible by using Sucrase as the parser instead of Babel. The penalty on my machine is about ~10ms (~50ms using Babel) for one-off builds and the initial build in watch mode, and basically not measurable for incremental builds.
CLI improvements
This PR also adds
--esm
and--ts
flags to thetailwindcss init
CLI command to generate your config file using your preferred syntax:When running the
init
command with no flags, Tailwind will guess which syntax to use based on the"type"
field in yourpackage.json
.When using the
--postcss
flag, the generatedpostcss.config.js
file will use the same syntax as yourtailwind.config.js
file, whether inferred or specified explicitly on the command line.@natemoo-re and @innocenzi have been credited as co-authors for their efforts in earlier PRs:
tailwind.config.js
files #3544