tailwind_components 0.0.51

Published Aug 12, 2025
SDKflutter
Platformandroidioswindowslinuxmacosweb

Flutter components based on Tailwind CSS.

Flutter components based on Tailwind CSS.

Features

FeaturesStatus
TWColors Library✔️
Input Field Widget✔️
Validators Library✔️
TaskCard Widget✔️
RoundedButton Widget✔️
GradientButton Widget✔️
SpaceCol Widget✔️
TWWrapper Widget✔️
Modal Function✔️
SpaceRow Widget✔️
AutoGrid Widget✔️

Usage

Here are some examples how to use some of the components

Colors

TWColors.red_600;
TWColors.indigo_600;
TWColors.emerald_400;

InputField

Form(
    key: _formKey,
    child: InputField(
        controller: _controller,
        color: TWColors.indigo_600,
        textCapitalization: TextCapitalization.none,
        keyboardType: TextInputType.emailAddress,
        validators: [Validators.isNotEmpty, Validators.isValidEmail],
        autovalidateMode: AutovalidateMode.always,
        label: 'Email *',
        placeholder: 'Enter your email',
        errorMessage: 'Custom error message',
        enableErrorIcon: true,
    ),
),

SpaceCol

SpaceCol(
    spaceBetween: 10,
    children: [],
),

SpaceRow

SpaceRow(
    spaceBetween: 10,
    children: [],
),

AutoGrid Automatically creates a grid with a specific amount of columns. All columns extent their height to the largest of the row.

AutoGrid(
    amountCols: 4,
    gap: 10,
    children: [],
),