Merge pull request #21909 from Yoast/21887-rtl-support-for-ui-library

Tailwind & UI library: Improve RTL support
Yoast · Dec 30, 2024 · 01c6afd · 01c6afd
2 parents 25587e2 + 9a5f5e6
commit 01c6afd
Show file tree

Hide file tree

Showing 94 changed files with 427 additions and 393 deletions.
diff --git a/admin/class-admin-asset-manager.php b/admin/class-admin-asset-manager.php
@@ -658,6 +658,11 @@ protected function styles_to_be_registered() {
 			[
 				'name' => 'tailwind',
 				'src'  => 'tailwind-' . $flat_version,
+				// Note: The RTL suffix is not added here.
+				// Tailwind and our UI library provide styling that should be standalone compatible with RTL.
+				// To make it easier we should use the logical properties and values when possible.
+				// If there are exceptions, we can use the Tailwind modifier, e.g. `rtl:yst-space-x-reverse`.
+				'rtl'  => false,
 			],
 			[
 				'name' => 'new-settings',

diff --git a/config/grunt/task-config/rtlcss.js b/config/grunt/task-config/rtlcss.js
@@ -0,0 +1,11 @@
+// https://github.com/MohammadYounes/grunt-rtlcss
+module.exports = {
+	build: {
+		src: [
+			"**/*.css",
+			"!**/*-rtl.css",
+			// Exclude UI library CSS files, as they are already RTL compatible.
+			"!tailwind-*.css",
+		],
+	},
+};
diff --git a/css/src/admin-global.css b/css/src/admin-global.css
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "@babel/core": "^7.18.5",
     "@slack/webhook": "^5.0.2",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.2",
+    "@tailwindcss/forms": "^0.5.9",
     "@wordpress/dependency-extraction-webpack-plugin": "^4.28.0",
     "@wordpress/scripts": "^26.16.0",
     "@yoast/babel-preset": "^1.1.1",

diff --git a/packages/js/src/academy/app.js b/packages/js/src/academy/app.js
@@ -267,7 +267,7 @@ const App = () => {
 									/>
 
 									{ shouldShowPremiumBadge( course.dependencies, isPremium ) && (
-										<div className="yst-absolute yst-top-2 yst-right-2 yst-flex yst-gap-1.5">
+										<div className="yst-absolute yst-top-2 yst-end-2 yst-flex yst-gap-1.5">
 											<Badge size="small" variant="upsell">{ __( "Premium", "wordpress-seo" ) }</Badge>
 										</div>
 									) }
@@ -291,7 +291,7 @@ const App = () => {
 													__( "(Opens in a new browser tab)", "wordpress-seo" )
 												}
 											</span>
-											<ArrowSmRightIcon className="yst-h-4 yst-w-4 yst-ml-1 yst-icon-rtl" />
+											<ArrowSmRightIcon className="yst-h-4 yst-w-4 yst-ms-1 yst-icon-rtl" />
 										</Link> }
 								</Card.Content>
 								<Card.Footer>
@@ -309,7 +309,7 @@ const App = () => {
 													rel="noopener"
 													{ ...premiumUpsellConfig }
 												>
-													<LockOpenIcon className="yst-w-5 yst-h-5 yst--ml-1 yst-shrink-0" { ...svgAriaProps } />
+													<LockOpenIcon className="yst-w-5 yst-h-5 yst--ms-1 yst-shrink-0" { ...svgAriaProps } />
 													{ sprintf(
 														/* translators: %1$s expands to Premium. */
 														__( "Unlock with %1$s", "wordpress-seo" ),
@@ -331,7 +331,7 @@ const App = () => {
 													rel="noopener"
 												>
 													{ __( "Start the course", "wordpress-seo" ) }
-													<ExternalLinkIcon className="yst--mr-1 yst-ml-1 yst-h-5 yst-w-5 yst-text-white" />
+													<ExternalLinkIcon className="yst--me-1 yst-ms-1 yst-h-5 yst-w-5 yst-text-white rtl:yst-rotate-[270deg]" />
 												</Button>
 											)
 										}

diff --git a/packages/js/src/components/MetaboxButton.js b/packages/js/src/components/MetaboxButton.js
@@ -12,7 +12,8 @@ import PropTypes from "prop-types";
 const MetaboxButtonText = ( { className, ...props } ) => (
 	<span
 		className={ classNames(
-			"yst-grow yst-overflow-hidden yst-overflow-ellipsis yst-whitespace-nowrap yst-font-wp yst-text-[#555] yst-text-base yst-leading-[normal] yst-subpixel-antialiased yst-text-left",
+			"yst-grow yst-overflow-hidden yst-overflow-ellipsis yst-whitespace-nowrap yst-font-wp",
+			"yst-text-[#555] yst-text-base yst-leading-[normal] yst-subpixel-antialiased yst-text-start",
 			className
 		) }
 		{ ...props }
@@ -40,7 +41,9 @@ export const MetaboxButton = ( { className, ...props } ) => (
 	<button
 		type="button"
 		className={ classNames(
-			"yst-flex yst-items-center yst-w-full yst-pt-4 yst-pb-4 yst-pr-4 yst-pl-6 yst-space-x-2 yst-border-t yst-border-t-[rgb(0,0,0,0.2)] yst-rounded-none yst-transition-all hover:yst-bg-[#f0f0f0] focus:yst-outline focus:yst-outline-[1px] focus:yst-outline-[color:#0066cd] focus:-yst-outline-offset-1 focus:yst-shadow-[0_0_3px_rgba(8,74,103,0.8)]",
+			"yst-flex yst-items-center yst-w-full yst-pt-4 yst-pb-4 yst-pe-4 yst-ps-6 yst-space-x-2 rtl:yst-space-x-reverse",
+			"yst-border-t yst-border-t-[rgb(0,0,0,0.2)] yst-rounded-none yst-transition-all hover:yst-bg-[#f0f0f0]",
+			"focus:yst-outline focus:yst-outline-[1px] focus:yst-outline-[color:#0066cd] focus:-yst-outline-offset-1 focus:yst-shadow-[0_0_3px_rgba(8,74,103,0.8)]",
 			className
 		) }
 		{ ...props }

diff --git a/packages/js/src/components/WooCommerceUpsell.js b/packages/js/src/components/WooCommerceUpsell.js
@@ -19,7 +19,7 @@ const WooCommerceUpsell = ( { link, text } ) => {
 				target="_blank"
 				rel="noopener"
 			>
-				<LockOpenIcon className="yst-w-4 yst-h-4 yst--ml-1 yst-shrink-0" />
+				<LockOpenIcon className="yst-w-4 yst-h-4 yst--ms-1 yst-shrink-0" />
 				{ sprintf(
 				/* translators: %1$s expands to Yoast WooCommerce SEO. */
 					__( "Unlock with %1$s", "wordpress-seo" ),

diff --git a/packages/js/src/components/contentAnalysis/Results.js b/packages/js/src/components/contentAnalysis/Results.js
@@ -98,7 +98,7 @@ class Results extends Component {
 			/>
 			{ this.props.shouldUpsellHighlighting &&
 				<div className="yst-root">
-					<Badge className="yst-absolute yst-px-[3px] yst-py-[3px] yst--right-[6.5px] yst--top-[6.5px]" size="small" variant="upsell">
+					<Badge className="yst-absolute yst-px-[3px] yst-py-[3px] yst--end-[6.5px] yst--top-[6.5px]" size="small" variant="upsell">
 						<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-shrink-0" role="img" aria-hidden={ true } focusable={ false } />
 					</Badge>
 				</div>

diff --git a/packages/js/src/components/modals/InternalLinkingSuggestionsUpsell.js b/packages/js/src/components/modals/InternalLinkingSuggestionsUpsell.js
@@ -95,7 +95,7 @@ export const InternalLinkingSuggestionsUpsell = () => {
 							{ __( "Internal linking suggestions", "wordpress-seo" ) }
 						</MetaboxButton.Text>
 						<Badge size="small" variant="upsell">
-							<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-mr-1 yst-shrink-0" { ...svgAriaProps } />
+							<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-me-1 yst-shrink-0" { ...svgAriaProps } />
 							<span>Premium</span>
 						</Badge>
 					</MetaboxButton>

diff --git a/packages/js/src/components/modals/KeywordUpsell.js b/packages/js/src/components/modals/KeywordUpsell.js
@@ -76,7 +76,7 @@ const KeywordUpsell = () => {
 							{ __( "Add related keyphrase", "wordpress-seo" ) }
 						</MetaboxButton.Text>
 						<Badge size="small" variant="upsell">
-							<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-mr-1 yst-shrink-0" { ...svgAriaProps } />
+							<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-me-1 yst-shrink-0" { ...svgAriaProps } />
 							<span>Premium</span>
 						</Badge>
 					</MetaboxButton>

diff --git a/packages/js/src/components/modals/PremiumSEOAnalysisModal.js b/packages/js/src/components/modals/PremiumSEOAnalysisModal.js
@@ -61,7 +61,7 @@ const PremiumSEOAnalysisModal = ( { location } ) => {
 							{ __( "Premium SEO analysis", "wordpress-seo" ) }
 						</MetaboxButton.Text>
 						<Badge size="small" variant="upsell">
-							<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-mr-1 yst-shrink-0" { ...svgAriaProps } />
+							<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-me-1 yst-shrink-0" { ...svgAriaProps } />
 							<span>Premium</span>
 						</Badge>
 					</MetaboxButton>

diff --git a/packages/js/src/dashboard/scores/components/score-list.js b/packages/js/src/dashboard/scores/components/score-list.js
@@ -13,7 +13,7 @@ import { __ } from "@wordpress/i18n";
 const CLASSNAMES = {
 	listItem: "yst-flex yst-items-center yst-py-3 first:yst-pt-0 last:yst-pb-0 yst-border-b last:yst-border-b-0",
 	score: "yst-shrink-0 yst-w-3 yst-aspect-square yst-rounded-full",
-	label: "yst-ml-3 yst-mr-2",
+	label: "yst-ms-3 yst-me-2",
 };
 
 /**
@@ -29,8 +29,8 @@ export const ScoreListSkeletonLoader = ( { className } ) => (
 			>
 				<SkeletonLoader className={ CLASSNAMES.score } />
 				<SkeletonLoader className={ CLASSNAMES.label }>{ label }</SkeletonLoader>
-				<SkeletonLoader className="yst-w-7 yst-mr-3">1</SkeletonLoader>
-				<SkeletonLoader className="yst-ml-auto yst-button yst-button--small">{ __( "View", "wordpress-seo" ) }</SkeletonLoader>
+				<SkeletonLoader className="yst-w-7 yst-me-3">1</SkeletonLoader>
+				<SkeletonLoader className="yst-ms-auto yst-button yst-button--small">{ __( "View", "wordpress-seo" ) }</SkeletonLoader>
 			</li>
 		) ) }
 	</ul>
@@ -46,7 +46,7 @@ const ScoreListItemContent = ( { score } ) => (
 		<Label as="span" className={ classNames( CLASSNAMES.label, "yst-leading-4 yst-py-1.5" ) }>
 			{ SCORE_META[ score.name ].label }
 		</Label>
-		<Badge variant="plain" className={ classNames( score.links.view && "yst-mr-3" ) }>{ score.amount }</Badge>
+		<Badge variant="plain" className={ classNames( score.links.view && "yst-me-3" ) }>{ score.amount }</Badge>
 	</>
 );
 
@@ -82,7 +82,7 @@ const ScoreListItem = ( { score, idSuffix } ) => {
 		<li className={ CLASSNAMES.listItem }>
 			<Content score={ score } idSuffix={ idSuffix } />
 			{ score.links.view && (
-				<Button as="a" variant="secondary" size="small" href={ score.links.view } className="yst-ml-auto">{ __( "View", "wordpress-seo" ) }</Button>
+				<Button as="a" variant="secondary" size="small" href={ score.links.view } className="yst-ms-auto">{ __( "View", "wordpress-seo" ) }</Button>
 			) }
 		</li>
 	);

diff --git a/packages/js/src/first-time-configuration/first-time-configuration-steps.js b/packages/js/src/first-time-configuration/first-time-configuration-steps.js
@@ -473,7 +473,7 @@ export default function FirstTimeConfigurationSteps() {
 						stepId={ STEPS.optimizeSeoData }
 						beforeGo={ beforeEditing }
 						isVisible={ showEditButton }
-						additionalClasses={ "yst-ml-auto" }
+						additionalClasses="yst-ms-auto"
 					>
 						{ __( "Edit", "wordpress-seo" ) }
 					</EditButton>
@@ -502,7 +502,7 @@ export default function FirstTimeConfigurationSteps() {
 						stepId={ STEPS.siteRepresentation }
 						beforeGo={ beforeEditing }
 						isVisible={ showEditButton }
-						additionalClasses={ "yst-ml-auto" }
+						additionalClasses="yst-ms-auto"
 					>
 						{ __( "Edit", "wordpress-seo" ) }
 					</EditButton>
@@ -532,7 +532,7 @@ export default function FirstTimeConfigurationSteps() {
 						stepId={ STEPS.socialProfiles }
 						beforeGo={ beforeEditing }
 						isVisible={ showEditButton }
-						additionalClasses={ "yst-ml-auto" }
+						additionalClasses="yst-ms-auto"
 					>
 						{ __( "Edit", "wordpress-seo" ) }
 					</EditButton>
@@ -557,7 +557,7 @@ export default function FirstTimeConfigurationSteps() {
 						stepId={ STEPS.personalPreferences }
 						beforeGo={ beforeEditing }
 						isVisible={ showEditButton }
-						additionalClasses={ "yst-ml-auto" }
+						additionalClasses="yst-ms-auto"
 					>
 						{ __( "Edit", "wordpress-seo" ) }
 					</EditButton>

diff --git a/packages/js/src/first-time-configuration/tailwind-components/base/alert.js b/packages/js/src/first-time-configuration/tailwind-components/base/alert.js
@@ -42,7 +42,7 @@ export default function Alert( { type, children, className } ) {
 	return (
 		<div className={ classNames( "yst-flex yst-p-4 yst-rounded-md", color, className ) }>
 			{ icon }
-			<div className="yst-flex-1 yst-ml-3 yst-text-sm">
+			<div className="yst-flex-1 yst-ms-3 yst-text-sm">
 				{ children }
 			</div>
 		</div>

diff --git a/packages/js/src/first-time-configuration/tailwind-components/base/combo-box.js b/packages/js/src/first-time-configuration/tailwind-components/base/combo-box.js
@@ -90,22 +90,22 @@ export default function YoastComboBox( { id, value, label, onChange, onQueryChan
 						<Combobox.Button
 							data-id={ `button-${ id }` }
 							role="button"
-							className="yst-w-full yst-h-full yst-rounded-md yst-border yst-border-slate-300 yst-flex yst-items-center yst-rounded-r-md yst-pl-3 yst-pr-2 focus-within:yst-border-primary-500 focus-within:yst-outline-none focus-within:yst-ring-1 focus-within:yst-ring-primary-500"
+							className="yst-w-full yst-h-full yst-rounded-md yst-border yst-border-slate-300 yst-flex yst-items-center yst-rounded-r-md yst-ps-3 yst-pe-2 focus-within:yst-border-primary-500 focus-within:yst-outline-none focus-within:yst-ring-1 focus-within:yst-ring-primary-500"
 							as="div"
 						>
 							<Combobox.Input
 								data-id={ `input-${ id }` }
-								className="yst-w-full yst-text-slate-700 yst-rounded-md yst-border-0 yst-outline-none yst-bg-white yst-py-2 yst-pl-0 yst-pr-10 yst-shadow-none sm:yst-text-sm"
+								className="yst-w-full yst-text-slate-700 yst-rounded-md yst-border-0 yst-outline-none yst-bg-white yst-py-2 yst-ps-0 yst-pe-10 yst-shadow-none sm:yst-text-sm"
 								onChange={ handleInputChange }
 								displayValue={ getDisplayValue }
 								placeholder={ placeholder }
 								onClick={ stopEventPropagation( open ) }
 							/>
-							<SelectorIcon className="yst-h-5 yst-w-5 yst-text-slate-400 yst-inset-y-0 yst-right-0" aria-hidden="true" />
+							<SelectorIcon className="yst-h-5 yst-w-5 yst-text-slate-400 yst-inset-y-0 yst-end-0" aria-hidden="true" />
 						</Combobox.Button>
 						{ ( filteredOptions.length > 0 ) && (
 							<Combobox.Options className="yst-absolute yst-z-10 yst-mt-1 yst-max-h-60 yst-w-full yst-overflow-auto yst-rounded-md yst-bg-white yst-text-base yst-shadow-lg yst-ring-1 yst-ring-black yst-ring-opacity-5 focus:yst-outline-none sm:yst-text-sm">
-								{ isLoading && <div className="yst-flex yst-bg-white yst-sticky yst-z-20 yst-text-sm yst-italic yst-top-0 yst-py-2 yst-pl-3 yst-pr-9 yst-my-0"><Spinner className="yst-text-primary-500 yst-h-4 yst-w-4 yst-mr-2 yst-self-center" />{ __( "Loading...", "wordpress-seo" ) }</div> }
+								{ isLoading && <div className="yst-flex yst-bg-white yst-sticky yst-z-20 yst-text-sm yst-italic yst-top-0 yst-py-2 yst-ps-3 yst-pe-9 yst-my-0"><Spinner className="yst-text-primary-500 yst-h-4 yst-w-4 yst-me-2 yst-self-center" />{ __( "Loading...", "wordpress-seo" ) }</div> }
 								{ filteredOptions.map( ( option ) => (
 									<Combobox.Option
 										key={ `yst-option-${ option.value }` }
@@ -117,7 +117,7 @@ export default function YoastComboBox( { id, value, label, onChange, onQueryChan
 												<span className={ classNames( "yst-block yst-truncate", ( selected || value.value === option.value ) && "yst-font-semibold" ) }>{ option.label }</span>
 												{ ( selected || value.value === option.value ) && (
 													<span
-														className={ "yst-absolute yst-inset-y-0 yst-right-0 yst-flex yst-items-center yst-pr-4 yst-text-white" }
+														className={ "yst-absolute yst-inset-y-0 yst-end-0 yst-flex yst-items-center yst-pe-4 yst-text-white" }
 													>
 														<CheckIcon className="yst-h-5 yst-w-5" aria-hidden="true" />
 													</span>

diff --git a/packages/js/src/first-time-configuration/tailwind-components/base/image-select.js b/packages/js/src/first-time-configuration/tailwind-components/base/image-select.js
@@ -79,7 +79,7 @@ export default function ImageSelect( {
 				<Button
 					id={ url ? id + "__replace-image" : id + "__select-image" }
 					variant="secondary"
-					className="yst-mr-2"
+					className="yst-me-2"
 					onClick={ onSelectImageClick }
 					data-hiive-event-name={ url ? "clicked_replace_image" : "clicked_select_image" }
 				>

diff --git a/packages/js/src/first-time-configuration/tailwind-components/base/single-select.js b/packages/js/src/first-time-configuration/tailwind-components/base/single-select.js
@@ -36,7 +36,7 @@ export default function Select( { id, value, choices, label, onChange, error, di
 							<Listbox.Button
 								data-id={ `button-${ id } ` }
 								className={ classNames(
-									"yst-relative yst-h-[45px] yst-w-full yst-leading-6 yst-py-2 yst-pl-3 yst-pr-10 yst-text-left yst-bg-white yst-border yst-border-slate-300 yst-rounded-md yst-shadow-sm yst-cursor-default focus:yst-outline-none focus:yst-ring-1 focus:yst-ring-primary-500 focus:yst-border-primary-500 sm:yst-text-sm",
+									"yst-relative yst-h-[45px] yst-w-full yst-leading-6 yst-py-2 yst-ps-3 yst-pe-10 yst-text-start yst-bg-white yst-border yst-border-slate-300 yst-rounded-md yst-shadow-sm yst-cursor-default focus:yst-outline-none focus:yst-ring-1 focus:yst-ring-primary-500 focus:yst-border-primary-500 sm:yst-text-sm",
 									{
 										"yst-border-red-300": error.isVisible,
 										"yst-opacity-50": disabled,
@@ -46,11 +46,11 @@ export default function Select( { id, value, choices, label, onChange, error, di
 								{ ...getErrorAriaProps( id, error ) }
 							>
 								<span className="yst-block yst-truncate">{ valueLabel }</span>
-								<span className="yst-absolute yst-inset-y-0 yst-right-0 yst-flex yst-items-center yst-pr-2 yst-pointer-events-none">
+								<span className="yst-absolute yst-inset-y-0 yst-end-0 yst-flex yst-items-center yst-pe-2 yst-pointer-events-none">
 									<SelectorIcon className="yst-w-5 yst-h-5 yst-text-slate-400" aria-hidden="true" />
 								</span>
 								{ error.isVisible &&
-								<div className="yst-flex yst-items-center yst-absolute yst-inset-y-0 yst-right-0 yst-mr-8">
+								<div className="yst-flex yst-items-center yst-absolute yst-inset-y-0 yst-end-0 yst-me-8">
 									<ExclamationCircleIcon className="yst-pointer-events-none yst-h-5 yst-w-5 yst-text-red-500" />
 								</div> }
 							</Listbox.Button>
@@ -88,7 +88,7 @@ export default function Select( { id, value, choices, label, onChange, error, di
 													{ selected ? (
 														<span
 															className={ classNames(
-																"yst-text-white yst-absolute yst-inset-y-0 yst-right-0 yst-flex yst-items-center yst-pr-4"
+																"yst-text-white yst-absolute yst-inset-y-0 yst-end-0 yst-flex yst-items-center yst-pe-4"
 															) }
 														>
 															<CheckIcon className="yst-w-5 yst-h-5" aria-hidden="true" />

diff --git a/packages/js/src/first-time-configuration/tailwind-components/base/text-input.js b/packages/js/src/first-time-configuration/tailwind-components/base/text-input.js
@@ -17,11 +17,11 @@ import MultiLineText from "./multi-line-text";
  */
 function FeedbackIcon( { hasError, hasSuccess } ) {
 	if ( hasError ) {
-		return <div className="yst-flex yst-items-center yst-absolute yst-inset-y-0 yst-right-0 yst-mr-3">
+		return <div className="yst-flex yst-items-center yst-absolute yst-inset-y-0 yst-end-0 yst-me-3">
 			<ExclamationCircleIcon className="yst-pointer-events-none yst-h-5 yst-w-5 yst-text-red-500" />
 		</div>;
 	} else if ( hasSuccess ) {
-		return <div className="yst-flex yst-items-center yst-absolute yst-inset-y-0 yst-right-0 yst-mr-3">
+		return <div className="yst-flex yst-items-center yst-absolute yst-inset-y-0 yst-end-0 yst-me-3">
 			<CheckCircleIcon className="yst-pointer-events-none yst-h-5 yst-w-5 yst-text-emerald-600" />
 		</div>;
 	}

diff --git a/...ages/js/src/first-time-configuration/tailwind-components/configuration-stepper-buttons.js b/...ages/js/src/first-time-configuration/tailwind-components/configuration-stepper-buttons.js
@@ -141,7 +141,7 @@ export function StepButtons( { stepId, beforeContinue, continueLabel, beforeBack
 		</ContinueButton>
 		<BackButton
 			stepId={ stepId }
-			additionalClasses="yst-ml-3"
+			additionalClasses="yst-ms-3"
 			beforeGo={ beforeBack }
 		>
 			{ backLabel }

diff --git a/packages/js/src/first-time-configuration/tailwind-components/helpers/index.js b/packages/js/src/first-time-configuration/tailwind-components/helpers/index.js
@@ -48,7 +48,7 @@ export const getErrorAriaProps = ( inputId, { isVisible } ) => isVisible ? {
  */
 export function getOptionActiveStyles( { active, selected } ) {
 	return classNames(
-		"yst-relative yst-cursor-default yst-select-none yst-py-2 yst-pl-3 yst-pr-9 yst-my-0",
+		"yst-relative yst-cursor-default yst-select-none yst-py-2 yst-ps-3 yst-pe-9 yst-my-0",
 		selected && "yst-bg-primary-500 yst-text-white",
 		( active && ! selected ) && "yst-bg-primary-200 yst-text-slate-700",
 		( ! active && ! selected ) && "yst-text-slate-700"

diff --git a/packages/js/src/first-time-configuration/tailwind-components/step-header.js b/packages/js/src/first-time-configuration/tailwind-components/step-header.js
@@ -65,7 +65,7 @@ export default function StepHeader( { name, description, isFinished, children }
 			/>
 		</span>
 		{ /* Name and description. */ }
-		<span className="yst-ml-4 yst-min-w-0 yst-flex yst-flex-col">
+		<span className="yst-ms-4 yst-min-w-0 yst-flex yst-flex-col">
 			<span className={ `yst-transition-colors yst-duration-500 yst-text-xs yst-font-[650] yst-tracking-wide yst-uppercase ${ nameClassNames }` }>
 				{ name }
 			</span>

diff --git a/packages/js/src/first-time-configuration/tailwind-components/stepper.js b/packages/js/src/first-time-configuration/tailwind-components/stepper.js
@@ -135,11 +135,11 @@ export function Step( { children } ) {
 		{ stepIndex !== lastStepIndex &&
 			<Fragment>
 				<div
-					className={ "yst--ml-px yst-absolute yst-left-4 yst-w-0.5 yst-h-full yst-bg-slate-300 yst--bottom-6" }
+					className={ "yst--ms-px yst-absolute yst-start-4 yst-w-0.5 yst-h-full yst-bg-slate-300 yst--bottom-6" }
 					aria-hidden="true"
 				/>
 				<div
-					className={ `yst-h-12 yst-transition-transform ${ delayUntilStepFaded } yst-ease-linear ${ slideDurationClass } ${ stepIndex < activeStepIndex  ? "yst-scale-y-1" : "yst-scale-y-0" } yst-origin-top yst--ml-px yst-absolute yst-left-4 yst-w-0.5 yst-bg-primary-500 yst-top-8` }
+					className={ `yst-h-12 yst-transition-transform ${ delayUntilStepFaded } yst-ease-linear ${ slideDurationClass } ${ stepIndex < activeStepIndex  ? "yst-scale-y-1" : "yst-scale-y-0" } yst-origin-top yst--ms-px yst-absolute yst-start-4 yst-w-0.5 yst-bg-primary-500 yst-top-8` }
 					aria-hidden="true"
 				/>
 			</Fragment>
@@ -223,7 +223,7 @@ function Content( { children } ) {
 				easing="ease-in-out"
 				duration={ slideDuration }
 			>
-				<div className={ `yst-transition-opacity ${ fadeDuration } yst-relative yst-ml-12 yst-mt-4 yst-pb-1 ${ isFaded ? "yst-opacity-0 yst-pointer-events-none" : "yst-opacity-100" }` }>
+				<div className={ `yst-transition-opacity ${ fadeDuration } yst-relative yst-ms-12 yst-mt-4 yst-pb-1 ${ isFaded ? "yst-opacity-0 yst-pointer-events-none" : "yst-opacity-100" }` }>
 					{ children }
 				</div>
 			</AnimateHeight>