tailwind-react-ui

React utility component primitives & UI framework for use with Tailwind CSS

Github 星跟踪图

Tailwind React UI

CircleCI

NB: As the 0.#.# version number suggests this is still very much work in progress, so semantic versioning will not be followed until a v1 release is solidified. Expect breaking changes to occur on minor version jumps.

Tailwind React UI provides ready built components that make use of Tailwind CSS utility framework.

If you're unfamiliar with the concepts behind Tailwind you can get an overview at https://tailwindcss.com/docs/what-is-tailwind:

Creating a framework for building custom UIs means you can't provide abstractions at the usual level of buttons, forms, cards, navbars, etc. Instead, Tailwind provides highly composable, low-level utility classes that make it easy to build complex user interfaces.

Tailwind React UI leverages these utility classes to provide base level components that are common across various projects, whilst still offering the ability to customise the output to match your project's style.

Features

No Built in Styles

Tailwind React UI's components have no inline/encapsulated styles (barring some use for CSS transitions), so there's no specificity issues, no new CSS in JS tool chain to apply. The library simply uses classes made available by Tailwind CSS that your whole app will make use of with hooks available to specify which classes are applied.

Utility Class Props

Introduces a props API for Tailwind's uitlity classes that allows for extensive customisation & quick prototyping

  • Bring this functionality to your own components through the withTailind higher order component or by using the component primitives to have that handled down wind
Configurable Theme

Has a configurable theme to apply a design system approach for the base styling of components

  • Uses React context in order to allow for customising which color / space / etc classes get applied by default

  • Can still leverage the utility props in all components to override the default styling in whatever way you wish with sensible defaults applied in relevent components, e.g. <FillButton bg="purple-dark" text="white" /> will also apply interactive styling to the resulting element <button className="bg-purple text-white hover:bg-purple-darker focus:bg-purple-darker" />

Composable Components

Tailwind React UI's suite of components are highly composable allowing for a large degree of flexibility.

  • Components are largely functional, but where applicable offer wrappers to control UI state for opening/closing/etc.

  • Components have accessibility best practices built in; inputs will read out related help/error text, toggleable components correctly call out their open state, etc

PurgeCSS Support

PurgeCSS is a key tool when using TailwindCSS to strip out any of the unused utilities and to avoid any complications with this the library provides a whitelist of classes your theme will generate from components as well as a custom extractor that parses the utility class props API used by the components.

Example

Using Utility Components
<Box maxW="md" m={{ x: 'auto' }}>
  <Box border shadow bg="white">
    <Box p={4}>
      <Text is="h1" text={['blue', 'xxl']} m={{ b: 4 }}>
        Hello World
      </Text>
    </Box>
    <Flex items="end" wrap reverse>
      <Touchable
        p={{ x: 4, y: 2 }}
        border={[true, 'transparent']}
        bg="blue"
        bg-hocus="blue-dark"
        text="white"
        w="full"
        w-sm="1/5"
      >
        Foo
      </Touchable>
      <Touchable
        p={{ x: 4, y: 2 }}
        border={[true, 'blue']}
        text="blue"
        text-hocus="white"
        bg-hocus="blue"
        w="full"
        w-sm="1/5"
      >
        Bar
      </Touchable>
    </Flex>
  </Box>
</Box>
Using UI Components
<Container maxW="md">
  <Card border shadow>
    <CardBody>
      <Title size={6} text="blue">
        Hello World
      </Title>
    </CardBody>
    <CardFooter wrap>
      <FillButton brand="primary" w="full" w-sm="1/5">
        Foo
      </FillButton>
      <OutlineButton brand="primary" w="full" w-sm="1/5">
        Bar
      </OutlineButton>
    </CardFooter>
  </Card>
</Container>

Useful Links

项目概况

主要编程语言JavaScript
编程语言JavaScript
最新版本名称v0.8.1
第一版名称v0.2.1
最后发布时间2018-11-13 20:58:00
首次发布2018-08-20 22:06:35
最后一次提交2020-08-22 10:08:31
创建于2018-08-10T06:19:43
推送于2022-06-23T02:46:47
提交数155
关注者数5
名称与所有者emortlock/tailwind-react-ui
派生数40
星数261
问题数24
打开的问题数9
发布数21
语言数2
拉请求数60
打开的拉请求数12
关闭的拉请求数25
已启用问题?
已启用Wiki?
已存档?
是分叉?
已锁定?
是镜像?
是私有?
To the top