Skip to content

Commit

Permalink
Add radius utilities and deprecated rounded utilities
Browse files Browse the repository at this point in the history
adamwathan authored and philipp-spiess committed Nov 11, 2024
1 parent 6177ca9 commit fed942b
Showing 6 changed files with 584 additions and 30 deletions.
Original file line number Diff line number Diff line change
@@ -271,14 +271,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
--blur-xl: 24px;
--blur-2xl: 40px;
--blur-3xl: 64px;
--radius-xs: .125rem;
--radius-sm: .25rem;
--radius-md: .375rem;
--radius-lg: .5rem;
--radius-xl: .75rem;
--radius-2xl: 1rem;
--radius-3xl: 1.5rem;
--radius-4xl: 2rem;
--shadow-2xs: 0 1px #0000000d;
--shadow-xs: 0 1px 2px 0 #0000000d;
--shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
8 changes: 0 additions & 8 deletions packages/tailwindcss/src/__snapshots__/index.test.ts.snap
Original file line number Diff line number Diff line change
@@ -270,14 +270,6 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
--blur-xl: 24px;
--blur-2xl: 40px;
--blur-3xl: 64px;
--radius-xs: .125rem;
--radius-sm: .25rem;
--radius-md: .375rem;
--radius-lg: .5rem;
--radius-xl: .75rem;
--radius-2xl: 1rem;
--radius-3xl: 1.5rem;
--radius-4xl: 2rem;
--shadow-2xs: 0 1px #0000000d;
--shadow-xs: 0 1px 2px 0 #0000000d;
--shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
540 changes: 540 additions & 0 deletions packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

Large diffs are not rendered by default.

35 changes: 33 additions & 2 deletions packages/tailwindcss/src/utilities.ts
Original file line number Diff line number Diff line change
@@ -1928,8 +1928,11 @@ export function createUtilities(theme: Theme) {
staticUtility('break-all', [['word-break', 'break-all']])
staticUtility('break-keep', [['word-break', 'break-keep']])

/**
* @css `border-radius`
*/
{
// border-radius
// Deprecated: `rounded` utilities
for (let [root, properties] of [
['rounded', ['border-radius']],
['rounded-s', ['border-start-start-radius', 'border-end-start-radius']],
@@ -1956,10 +1959,38 @@ export function createUtilities(theme: Theme) {
properties.map((property) => [property, 'calc(infinity * 1px)']),
)
functionalUtility(root, {
themeKeys: ['--radius'],
themeKeys: ['--radius', '--rounded'],
handle: (value) => properties.map((property) => decl(property, value)),
})
}

// `radius-*` utilities
for (let [root, properties] of [
['radius', ['border-radius']],
['radius-s', ['border-start-start-radius', 'border-end-start-radius']],
['radius-e', ['border-start-end-radius', 'border-end-end-radius']],
['radius-t', ['border-top-left-radius', 'border-top-right-radius']],
['radius-r', ['border-top-right-radius', 'border-bottom-right-radius']],
['radius-b', ['border-bottom-right-radius', 'border-bottom-left-radius']],
['radius-l', ['border-top-left-radius', 'border-bottom-left-radius']],
['radius-ss', ['border-start-start-radius']],
['radius-se', ['border-start-end-radius']],
['radius-ee', ['border-end-end-radius']],
['radius-es', ['border-end-start-radius']],
['radius-tl', ['border-top-left-radius']],
['radius-tr', ['border-top-right-radius']],
['radius-br', ['border-bottom-right-radius']],
['radius-bl', ['border-bottom-left-radius']],
] as const) {
staticUtility(
`${root}-full`,
properties.map((property) => [property, 'calc(infinity * 1px)']),
)

spacingUtility(root, '--radius', (value) =>
properties.map((property) => decl(property, value)),
)
}
}

staticUtility('border-solid', [
20 changes: 8 additions & 12 deletions packages/tailwindcss/theme.css
Original file line number Diff line number Diff line change
@@ -299,16 +299,6 @@
--blur-2xl: 40px;
--blur-3xl: 64px;

/* Radii */
--radius-xs: 0.125rem;
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
--radius-lg: 0.5rem;
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
--radius-3xl: 1.5rem;
--radius-4xl: 2rem;

/* Shadows */
--shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -457,11 +447,17 @@
}
}

/* Deprecated */
@theme default inline reference {
--blur: 8px;
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
--drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
--radius: 0.25rem;
--rounded: 0.25rem;
--rounded-sm: 0.125rem;
--rounded-md: 0.375rem;
--rounded-lg: 0.5rem;
--rounded-xl: 0.75rem;
--rounded-2xl: 1rem;
--rounded-3xl: 1.5rem;
--rounded-4xl: 2rem;
}
3 changes: 3 additions & 0 deletions playgrounds/vite/src/app.tsx
Original file line number Diff line number Diff line change
@@ -2,6 +2,9 @@ export function App() {
return (
<div className="m-3 p-3 border">
<h1 className="text-blue-500">Hello World</h1>

<div className="h-48 w-72 bg-red-500 rounded-none"></div>
<div className="h-48 w-72 bg-red-500 radius-4 pt"></div>
</div>
)
}

0 comments on commit fed942b

Please sign in to comment.