我有以下代码，并希望有一个使用 Tailwind CSS 的工作步进器。有人可以帮忙吗？我想知道如何在 React 或 Next JS 中使用 Tailwind CSS 创建步骤
<React.Fragment>
<div className='flex flex-wrap justify-between grid-flow-col grid-cols-3 gap-2 py-5 ml-8 align-baseline md:grid-cols-3 xl:grid-cols-3 sm:mb-0 md:gap-3'>
<div className='w-2/3 p-10 bg-white rounded-lg shadow-2xl px-6 py-10 mx-6 md:px-2'>
<form className='px-3'>
<div
className='flex text-md content-center text-center mb-4 py-3'
activeStep={activeStep}
// alternativeLabel
>
{steps.map((label) => (
<div className='w-1/3' key={label}>
<div>{label}</div>
</div>
))}
</div>
<div className='md:box-content'>
{activeStep === steps.length ? (
errors && errors.length > 0 ? (
<div className='md:box-content'>
<ul>
{errors.map((error) => (
<li key={error}>
<div
className='bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative'
role='alert'
>
{' '}
{error}{' '}
</div>
</li>
))}
</ul>
<div className='mt-1'>
<button
onClick={handleBack}
className='px-4 py-1 mt-4 font-bold text-white uppercase rounded bg-gray-500 focus:outline-none focus:shadow-outline'
type='button'
>
Back
</button>
</div>
</div>
) : (
<div className='box-content'>
<div className='grid justify-center items-center'>
<div className='spinner h-12 w-12' />
</div>
<div>Confirming Order</div>
</div>
)
) : (
<div className='box-content'>
{getStepContent(activeStep)}
<button
onClick={handleBack}
className='px-4 py-1 mt-4 font-bold text-white uppercase rounded bg-gray-500 focus:outline-none focus:shadow-outline'
disabled={activeStep === 0}
>
Back
</button>
<button
onClick={handleNext}
className='px-4 py-1 mt-4 mx-3 font-bold text-white uppercase bg-orange-400 rounded focus:outline-none focus:shadow-outline active:bg-orange-400 hover:bg-orange-500'
>
{activeStep === steps.length - 1
? 'Confirm Order'
: 'Next'}
</button>
</div>
)}
</div>
</form>
</div>
<div className='px-4 sm:grid-cols-1'>
<div className='grid h-auto py-5 bg-white rounded w-80 sm:py-3 sm:mt-0 px-3'>
<h1 className='py-1 text-2xl font-bold font-Roboto'>
Order summary:{' '}
</h1>
<ul>
{cart.data.line_items.map((lineItem) => (
<li
className='flex justify-between font-semibold'
key={lineItem.id}
>
<div
item
className='flex flex-grow justify-between flex-col-2 align-items-right px-2 mx-auto py-2'
>
<h1 item className='py-2'>
{lineItem.quantity} x{' '}
{lineItem.name}
</h1>
<div className='grid px-4 text-center text-white bg-green-700 rounded focus:outline-none focus:shadow-outline place-items-center'>
{
lineItem.line_total
.formatted_with_symbol
}
</div>
</div>
</li>
))}
<li className='flex justify-between px-2 font-semibold'>
<div className='flex flex-grow justify-between text-white uppercase bg-orange-400 rounded active:bg-orange-400 hover:bg-orange-500 flex-col-2 align-items-right px-2 mx-auto py-2'>
<h1 item>Subtotal</h1>
<p item>
{
cart.data.subtotal
.formatted_with_symbol
}
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</React.Fragment>
我创建了如下步骤：并且我只能在更改 activeStep useState(0)、useState(1)、useState(2) 时访问这些步骤
// Stepper
const [activeStep, setActiveStep] = useState(0)
const steps = [
'Customer information',
'Shipping details',
'Payment information',
]
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1)
if (activeStep === steps.length - 1) {
handleCaptureCheckout()
}
}
我创建了一个 switch 案例来测试它（案例 0、案例 1 和案例 2）。