Skip to content

Commit dcf116b

Browse files
thecrypticacephilipp-spiessRobinMalfait
authored
Add @tailwindcss/browser package (#15558)
Co-authored-by: Philipp Spiess <[email protected]> Co-authored-by: Robin Malfait <[email protected]>
1 parent d4f693f commit dcf116b

File tree

14 files changed

+930
-17
lines changed

14 files changed

+930
-17
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10+
### Added
11+
12+
- Add `@tailwindcss/browser` package to run Tailwind CSS in the browser ([#15558](https://github.com/tailwindlabs/tailwindcss/pull/15558))
13+
1014
### Fixed
1115

1216
- Use the correct property value for `place-content-between`, `place-content-around`, and `place-content-evenly` utilities ([#15440](https://github.com/tailwindlabs/tailwindcss/pull/15440))

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
"dev": "turbo dev --filter=!./playgrounds/*",
4040
"test": "cargo test && vitest run --hideSkippedTests",
4141
"test:integrations": "vitest --root=./integrations",
42-
"test:ui": "pnpm run --filter=tailwindcss test:ui",
42+
"test:ui": "pnpm run --filter=tailwindcss test:ui && pnpm run --filter=@tailwindcss/browser test:ui",
4343
"tdd": "vitest --hideSkippedTests",
4444
"bench": "vitest bench",
4545
"version-packages": "node ./scripts/version-packages.mjs",

‎packages/@tailwindcss-browser/README.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<p align="center">
2+
<a href="https://tailwindcss.com" target="_blank">
3+
<picture>
4+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-dark.svg">
5+
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg">
6+
<img alt="Tailwind CSS" src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/HEAD/.github/logo-light.svg" width="350" height="70" style="max-width: 100%;">
7+
</picture>
8+
</a>
9+
</p>
10+
11+
<p align="center">
12+
A utility-first CSS framework for rapidly building custom user interfaces.
13+
</p>
14+
15+
<p align="center">
16+
<a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/actions/workflow/status/tailwindlabs/tailwindcss/ci.yml?branch=next" alt="Build Status"></a>
17+
<a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
18+
<a href="https://github.com/tailwindcss/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
19+
<a href="https://github.com/tailwindcss/tailwindcss/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
20+
</p>
21+
22+
---
23+
24+
## Documentation
25+
26+
For full documentation, visit [tailwindcss.com](https://tailwindcss.com).
27+
28+
## Community
29+
30+
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
31+
32+
[Discuss Tailwind CSS on GitHub](https://github.com/tailwindcss/tailwindcss/discussions)
33+
34+
For chatting with others using the framework:
35+
36+
[Join the Tailwind CSS Discord Server](https://discord.gg/7NF8GNe)
37+
38+
## Contributing
39+
40+
If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindcss/tailwindcss/blob/next/.github/CONTRIBUTING.md) **before submitting a pull request**.

‎packages/@tailwindcss-browser/package.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "@tailwindcss/browser",
3+
"version": "4.0.0-beta.8",
4+
"description": "A utility-first CSS framework for rapidly building custom user interfaces.",
5+
"license": "MIT",
6+
"repository": {
7+
"type": "git",
8+
"url": "https://github.com/tailwindlabs/tailwindcss.git",
9+
"directory": "packages/@tailwindcss-browser"
10+
},
11+
"bugs": "https://github.com/tailwindlabs/tailwindcss/issues",
12+
"homepage": "https://tailwindcss.com",
13+
"scripts": {
14+
"lint": "tsc --noEmit",
15+
"build": "tsup-node",
16+
"dev": "pnpm run build -- --watch",
17+
"test:ui": "playwright test"
18+
},
19+
"exports": {
20+
".": "./dist/index.mjs",
21+
"./package.json": "./package.json"
22+
},
23+
"files": [
24+
"dist"
25+
],
26+
"publishConfig": {
27+
"provenance": true,
28+
"access": "public"
29+
},
30+
"devDependencies": {
31+
"h3": "^1.13.0",
32+
"listhen": "^1.9.0",
33+
"tailwindcss": "workspace:*"
34+
}
35+
}

‎packages/@tailwindcss-browser/playwright.config.ts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { defineConfig, devices } from '@playwright/test'
2+
3+
/**
4+
* See https://playwright.dev/docs/test-configuration.
5+
*/
6+
export default defineConfig({
7+
testDir: './tests',
8+
/* Run tests in files in parallel */
9+
fullyParallel: true,
10+
/* Fail the build on CI if you accidentally left test.only in the source code. */
11+
forbidOnly: !!process.env.CI,
12+
/* Retry on CI only */
13+
retries: process.env.CI ? 2 : 0,
14+
/* Opt out of parallel tests on CI. */
15+
workers: process.env.CI ? 1 : undefined,
16+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
17+
reporter: 'html',
18+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
19+
use: {
20+
/* Base URL to use in actions like `await page.goto('/')`. */
21+
// baseURL: 'http://127.0.0.1:3000',
22+
23+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
24+
trace: 'on-first-retry',
25+
},
26+
27+
/* Configure projects for major browsers */
28+
projects: [
29+
{
30+
name: 'chromium',
31+
use: { ...devices['Desktop Chrome'] },
32+
},
33+
{
34+
name: 'webkit',
35+
use: { ...devices['Desktop Safari'] },
36+
},
37+
{
38+
name: 'firefox',
39+
use: {
40+
...devices['Desktop Firefox'],
41+
// https://playwright.dev/docs/test-use-options#more-browser-and-context-options
42+
launchOptions: {
43+
// https://playwright.dev/docs/api/class-browsertype#browser-type-launch-option-firefox-user-prefs
44+
firefoxUserPrefs: {
45+
// By default, headless Firefox runs as though no pointers
46+
// capabilities are available.
47+
// https://github.com/microsoft/playwright/issues/7769#issuecomment-966098074
48+
//
49+
// This impacts our `hover` variant implementation which uses an
50+
// '(hover: hover)' media query to determine if hover is available.
51+
//
52+
// Available values for pointer capabilities:
53+
// NO_POINTER = 0x00;
54+
// COARSE_POINTER = 0x01;
55+
// FINE_POINTER = 0x02;
56+
// HOVER_CAPABLE_POINTER = 0x04;
57+
//
58+
// Setting to 0x02 | 0x04 says the system supports a mouse
59+
'ui.primaryPointerCapabilities': 0x02 | 0x04,
60+
'ui.allPointerCapabilities': 0x02 | 0x04,
61+
},
62+
},
63+
},
64+
},
65+
],
66+
})

‎packages/@tailwindcss-browser/src/assets.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import index from 'tailwindcss/index.css'
2+
import preflight from 'tailwindcss/preflight.css'
3+
import theme from 'tailwindcss/theme.css'
4+
import utilities from 'tailwindcss/utilities.css'
5+
6+
export const css = {
7+
index,
8+
preflight,
9+
theme,
10+
utilities,
11+
}

0 commit comments

Comments
 (0)