Update
I reported the bug to the TailwindCSS team in tailwindlabs/tailwindcss #15977. It will be fixed in the next release.
Our @tailwindcss/browser build is intended to run inside a <script> tag inside browsers. Because of how variable assignment within <script> tags work, all variables that were defined within that script are currently assigned on the global namespace.
This is especially troublesome as eslint uses $ as a valid mangling character so importing the CDN build would now redefine globalThis.$ which collides with many very popular JavaScript libraries.
In order to avoid polluting the global namespace, this PR changes the build step to emit an IIFE (so all vars defined are scroped to the function closure instead of the global namespace).
Fixed from v4.0.1 onwards.
$(document).ready(function () {
alert("Hello world");
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/@tailwindcss/[email protected]"></script>
Original (reproducible in the 4.0.0 version only)
It looks like the TailwindCSS v4 CDN also uses the $() function. I think it might be best if you stop using it and switch to the jQuery() function, or declare another shorthand function.
The last declared $() function will always run. Since you loaded TailwindCSS second, jQuery's $ function got overwritten. Reversing the order isn't a solution either, because in that case, TailwindCSS would lose its $() function.
console.log($)
<script src="https://unpkg.com/@tailwindcss/[email protected]"></script>
Solutions
Instead of $(), use the jQuery() function:
jQuery(document).ready(function () {
alert("Hello world");
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/@tailwindcss/[email protected]"></script>
Or, you can restore the j() (or some similar shorthand function) functionality using jQuery() function.
// Restore "j()" (instead of "$()") to work as jQuery
window.j = window.jQuery = jQuery.noConflict();
j(document).ready(function () {
alert("Hello world");
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/@tailwindcss/[email protected]"></script>
The error did not occur when using TailwindCSS v3, by the way. Since the v3 CDN did not include the $() function.
$(document).ready(function () {
alert("Hello world");
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
