mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
e4bfa8c9b7
Closes #15012 We do not have replacements for these plugins _just yet_. In order to increase compatibility with setups that rely on some of these legacy plugins, this PR bundles `@tailwindcss/forms`, `@tailwindcss/typography`, and `@tailwindcss/aspect-ratio` (after https://github.com/tailwindlabs/tailwindcss/pull/15029) with the standalone build now. In comparison to v3, this omits the `@tailwindcss/container-queries` plugin since is not a first-party feature of Tailwind CSS v4. ## Test Plan Added an integration test. I also tested this by running the standalone binary in a temporary folder with as simple input css: ```css @import "tailwindcss"; @plugin "@tailwindcss/typography"; ```
59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import os from 'node:os'
|
|
import path from 'node:path'
|
|
import { candidate, css, html, json, test } from '../utils'
|
|
|
|
const STANDALONE_BINARY = (() => {
|
|
switch (os.platform()) {
|
|
case 'win32':
|
|
return 'tailwindcss-windows-x64.exe'
|
|
case 'darwin':
|
|
return os.arch() === 'x64' ? 'tailwindcss-macos-x64' : 'tailwindcss-macos-arm64'
|
|
case 'linux':
|
|
return os.arch() === 'x64' ? 'tailwindcss-linux-x64' : 'tailwindcss-linux-arm64'
|
|
default:
|
|
throw new Error(`Unsupported platform: ${os.platform()} ${os.arch()}`)
|
|
}
|
|
})()
|
|
|
|
test(
|
|
'includes first-party plugins',
|
|
{
|
|
fs: {
|
|
'package.json': json`
|
|
{
|
|
"dependencies": {
|
|
"tailwindcss": "workspace:^",
|
|
"@tailwindcss/cli": "workspace:^"
|
|
}
|
|
}
|
|
`,
|
|
'index.html': html`
|
|
<div className="prose">
|
|
<h1>Headline</h1>
|
|
</div>
|
|
<input type="text" class="form-input" />
|
|
<div class="aspect-w-16"></div>
|
|
`,
|
|
'src/index.css': css`
|
|
@import 'tailwindcss/theme' theme(reference);
|
|
@import 'tailwindcss/utilities';
|
|
|
|
@plugin '@tailwindcss/forms';
|
|
@plugin '@tailwindcss/typography';
|
|
@plugin '@tailwindcss/aspect-ratio';
|
|
`,
|
|
},
|
|
},
|
|
async ({ fs, exec }) => {
|
|
await exec(
|
|
`${path.resolve(__dirname, `../../packages/@tailwindcss-standalone/dist/${STANDALONE_BINARY}`)} --input src/index.css --output dist/out.css`,
|
|
)
|
|
|
|
await fs.expectFileToContain('dist/out.css', [
|
|
candidate`form-input`,
|
|
candidate`prose`,
|
|
candidate`aspect-w-16`,
|
|
])
|
|
},
|
|
)
|