emortlock / tailwind-react-ui Goto Github PK

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

Home Page: https://emortlock.github.io/tailwind-react-ui/

JavaScript 99.62% CSS 0.38%

react react-components tailwindcss tailwind

tailwind-react-ui's Introduction

Tailwind React UI

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

tailwind-react-ui's People

Contributors

Stargazers

Watchers

tailwind-react-ui's Issues

An in-range update of autoprefixer is breaking the build 🚨

The devDependency autoprefixer was updated from `9.4.10` to `9.5.0`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

autoprefixer is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

✅ ci/circleci: greenkeeperUpdateLockFile: Your tests passed on CircleCI! (Details).
❌ ci/circleci: build: Your tests failed on CircleCI (Details).

Release Notes for 9.5 “Draco dormiens nunquam titillandus”

Autoprefixer 9.5 brings mask-composite support.

a {
  mask-composite: add;
}
b {
  mask: url(intersect.png) intersect, url(exclude.png);
}

a {
  -webkit-mask-composite: source-over;
          mask-composite: add;
}
b {
  -webkit-mask: url(intersect.png), url(exclude.png);
  -webkit-mask-composite: source-in, xor;
          mask: url(intersect.png) intersect, url(exclude.png);
}

Thanks to @semeleven for implementation and @iamvdo for suggestion.

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of eslint-plugin-import is breaking the build 🚨

The devDependency eslint-plugin-import was updated from `2.16.0` to `2.17.0`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-import is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

✅ ci/circleci: greenkeeperUpdateLockFile: Your tests passed on CircleCI! (Details).
❌ ci/circleci: build: Your tests failed on CircleCI (Details).

Commits

The new version differs by 61 commits.

0499050 bump to v2.17.0
f479635 [webpack] v0.11.1
8a4226d Merge pull request #1320 from bradzacher/export-ts-namespaces
988e12b fix(export): Support typescript namespaces
70c3679 [docs] make rule names consistent
6ab25ea [Tests] skip a TS test in eslint < 4
405900e [Tests] fix tests from #1319
2098797 [fix] export: false positives for typescript type + value export
70a59fe [fix] Fix overwriting of dynamic import() CallExpression
e4850df [ExportMap] fix condition for checking if block comment
918567d [fix] namespace: add check for null ExportMap
2d21c4c Merge pull request #1297 from echenley/ech/fix-isBuiltIn-local-aliases
0ff1c83 [dev deps] lock typescript to ~, since it doesn’t follow semver
40bf40a [*] [deps] update resolve
28dd614 Merge pull request #1304 from bradennapier/feature/typescript-export-type

There are 61 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

Is there a way to define a prefix?

Hi Ed,

I'm trying to using this project for a prototype that I'm building.

Part of that prototype has Bootstrap components, and there are a few clashes with Tailwind classes.

Tailwind supports a prefix option in config which prefixes all generated classes to avoid that problem.

Is there a way to define a prefix for this library so that I can take advantage of that feature?

Stef

Background Colors not pulling through

This may be an issue with my tailwind setup , not 100% sure.

I'm using the fill button component that is in the docs example.

const Button = () => <FillButton brand="primary">Submit</FillButton>

some styles pull in , others do not such as the background color.

here is my tailwind config

const plugins = require('tailwind-react-ui/plugins')
module.exports = {
  // ...project config
  purge: [
    
  ],
  plugins: [
    require('tailwindcss/lib/plugins/container')({}),
    ...Object.keys(plugins).map(name => plugins[name]()),
  ],
}

here is my postcss config

module.exports = {
	plugins: [
		require('tailwindcss'),
		require('autoprefixer'),
	],
};

:)

An in-range update of enzyme is breaking the build 🚨

There have been updates to the enzyme monorepo:

- The devDependency enzyme was updated from 3.8.0 to 3.9.0.

The devDependency enzyme-adapter-react-16 was updated from 1.10.0 to 1.11.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.

enzyme is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

✅ ci/circleci: greenkeeperUpdateLockFile: Your tests passed on CircleCI! (Details).
❌ ci/circleci: build: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of enzyme is breaking the build 🚨

There have been updates to the enzyme monorepo:

- The devDependency enzyme was updated from 3.8.0 to 3.9.0.

The devDependency enzyme-adapter-react-16 was updated from 1.9.1 to 1.10.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.

Status Details

✅ ci/circleci: greenkeeperUpdateLockFile: Your tests passed on CircleCI! (Details).
❌ ci/circleci: build: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

NumberInput is not exported

From reading the docs, there should be a NumberInput component corresponding to a numeric input. However, this is not exported into either of the distribution files:

$ grep NumberInput node_modules/tailwind-react-ui/dist/index.js
$ grep NumberInput node_modules/tailwind-react-ui/dist/index.cjs.js

An in-range update of enzyme is breaking the build 🚨

There have been updates to the enzyme monorepo:

- The devDependency enzyme was updated from 3.8.0 to 3.9.0.

The devDependency enzyme-adapter-react-16 was updated from 1.10.0 to 1.11.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.

Status Details

✅ ci/circleci: greenkeeperUpdateLockFile: Your tests passed on CircleCI! (Details).
❌ ci/circleci: build: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

Select is broken with latest TailwindCSS

I use tailwind-react-ui with latest TailwindCSS and component looks broken I noticed, that it uses pin-y and pin-r classes, which aren't available in TailwindCSS. There are top-0 and right-0 classes instead

Add props for margin

Ref: https://tailwindcss.com/docs/margin/

TailwindCSS has a lot of custom classes for margin, among them:

m-([0-8],10,12,16,20,24,32,40,48,56,64,auto,px) -> margin: $value;
-m-([0-8],10,12,16,20,24,32,40,48,56,64,auto,px) -> margin: -$value;
my-([0-8],10,12,16,20,24,32,40,48,56,64,auto,px) -> margin-top: $value; margin-bottom: $value;
-my-([0-8],10,12,16,20,24,32,40,48,56,64,auto,px) -> margin-top: -$value; margin-bottom: -$value;
mx-([0-8],10,12,16,20,24,32,40,48,56,64,auto,px) -> margin-right: $value; margin-left: $value;
-mx-([0-8],10,12,16,20,24,32,40,48,56,64,auto,px) -> margin-right: -$value; margin-left: -$value;
m{t,r,b,l}-([0-8],10,12,16,20,24,32,40,48,56,64,auto,px) -> margin-{top,right,bottom,left}: $value;
-m{t,r,b,l}-([0-8],10,12,16,20,24,32,40,48,56,64,auto,px) -> margin-{top,right,bottom,left}: -$value;

As far as I can see, these are not provided for in this library yet. Would it be possible to add margin props corresponding to these values?

I can see this working something like this:

<Container mt={6} />

is functionally the same as

<Container className="mt6" />

For negative values:

<Container mt={-6} />

would be the same as

<Container className="-mt6" />

Coveralls code coverage reporting

https://www.npmjs.com/package/coveralls

No colors in default tailwind configuration

I tried your package and it seems great. However, It seems like colors are broken, at least with the latest tailwind and default configuration.

If you take a look in the default tailwind configuration it uses: , you'll notice there are colors are defined with degrees:

      blue: {
        100: '#ebf8ff',
        200: '#bee3f8',
        300: '#90cdf4',
        400: '#63b3ed',
        500: '#4299e1',
        600: '#3182ce',
        700: '#2b6cb0',
        800: '#2c5282',
        900: '#2a4365',
      },

but your components use bg-blue hover:bg-blue-dark, so there are no those colors.

Is it a known issue? What is the best solution for that? Thanks

An in-range update of enzyme is breaking the build 🚨

There have been updates to the enzyme monorepo:

- The devDependency enzyme was updated from 3.8.0 to 3.9.0.

The devDependency enzyme-adapter-react-16 was updated from 1.11.0 to 1.11.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.

Status Details

✅ ci/circleci: greenkeeperUpdateLockFile: Your tests passed on CircleCI! (Details).
❌ ci/circleci: build: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

Try out conventional commits

https://github.com/marionebl/commitlint

Inputs don't work in Safari

You can check the demo page in Safari, you can't type text in the TextInput component.
This is because of select="none" attribute in Touchable.
As a workaround, TextInput can override the attribute with select="auto" or add a CSS for the global change:

/* Hack for cancelation select-none in Safari for inputs */
input.select-none { @apply select-auto }

An in-range update of enzyme is breaking the build 🚨

There have been updates to the enzyme monorepo:

- The devDependency enzyme was updated from 3.8.0 to 3.9.0.

The devDependency enzyme-adapter-react-16 was updated from 1.10.0 to 1.11.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.

Status Details

✅ ci/circleci: greenkeeperUpdateLockFile: Your tests passed on CircleCI! (Details).
❌ ci/circleci: build: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

Add props for alignment

Ref: https://tailwindcss.com/docs/text-align/

Tailwind CSS has alignment props for text, namely:

.text-left
.text-center
.text-right
.text-justify

As far as I can see, there are no props corresponding to these yet. Would it be possible to add an align prop, so for example:

<Text align="center" />

would correspond to

<Text className="text-center" />

An in-range update of react-transition-group is breaking the build 🚨

The dependency react-transition-group was updated from `2.6.0` to `2.6.1`.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-transition-group is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

✅ ci/circleci: greenkeeperUpdateLockFile: Your tests passed on CircleCI! (Details).
❌ ci/circleci: build: Your tests failed on CircleCI (Details).

Release Notes for v2.6.1

2.6.1 (2019-03-14)

Bug Fixes

package.json: mark react-transition-group as side-effect free for webpack tree shaking (#472) (b81dc89)

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

Button#disabled is still clickable

That's a dangerous bug, where <FillButton disabled> is still clickable, and has its handler executed

An in-range update of enzyme is breaking the build 🚨

There have been updates to the enzyme monorepo:

- The devDependency enzyme was updated from 3.8.0 to 3.9.0.

The devDependency enzyme-adapter-react-16 was updated from 1.9.1 to 1.10.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.

Status Details

✅ ci/circleci: greenkeeperUpdateLockFile: Your tests passed on CircleCI! (Details).
❌ ci/circleci: build: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of enzyme is breaking the build 🚨

There have been updates to the enzyme monorepo:

- The devDependency enzyme was updated from 3.8.0 to 3.9.0.

The devDependency enzyme-adapter-react-16 was updated from 1.11.1 to 1.11.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.

Status Details

✅ ci/circleci: greenkeeperUpdateLockFile: Your tests passed on CircleCI! (Details).
❌ ci/circleci: build: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

An in-range update of react is breaking the build 🚨

There have been updates to the react monorepo:

- The devDependency react was updated from 16.6.1 to 16.6.2.

The devDependency react-dom was updated from 16.6.1 to 16.6.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the react group definition.

react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

❌ ci/circleci: greenkeeperUpdateLockFile: Your tests failed on CircleCI (Details).
❌ ci/circleci: build: Your tests failed on CircleCI (Details).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

Update PurgeCSS extractor to work with primitive class abstractions

Classes such as col-reverse & wrap-reverse on Flex aren't being whitelisting in PurgeCSS

No license?

If a repository has no license, then all rights are reserved and it is not Open Source or Free. You cannot modify or redistribute this code without explicit permission from the copyright holder.

emortlock / tailwind-react-ui Goto Github PK

tailwind-react-ui's Introduction

Tailwind React UI

Features

No Built in Styles

Utility Class Props

Configurable Theme

Composable Components

PurgeCSS Support

Example

Using Utility Components

Using UI Components

Useful Links

tailwind-react-ui's People

Contributors

Stargazers

Watchers

Forkers

tailwind-react-ui's Issues

The devDependency autoprefixer was updated from 9.4.10 to 9.5.0.

The devDependency eslint-plugin-import was updated from 2.16.0 to 2.17.0.

There have been updates to the enzyme monorepo:

There have been updates to the enzyme monorepo:

There have been updates to the enzyme monorepo:

There have been updates to the enzyme monorepo:

There have been updates to the enzyme monorepo:

The dependency react-transition-group was updated from 2.6.0 to 2.6.1.

2.6.1 (2019-03-14)

Bug Fixes

There have been updates to the enzyme monorepo:

There have been updates to the enzyme monorepo:

There have been updates to the react monorepo:

Recommend Projects

Recommend Topics

Recommend Org

The devDependency autoprefixer was updated from `9.4.10` to `9.5.0`.

The devDependency eslint-plugin-import was updated from `2.16.0` to `2.17.0`.

The dependency react-transition-group was updated from `2.6.0` to `2.6.1`.