tw-styler

tw-styler - Tailwind CSS with Styled Components for React Native and Web

Note: To use tw-styler, Tailwind CSS must be properly set up in your project. Follow the Tailwind CSS Installation Guide to install and configure Tailwind CSS first.

A utility-first library that combines Tailwind CSS with Styled Components for both React Native and Web applications. It allows you to create highly customizable components with dynamic styles, including support for Tailwind utility classes.

Installation

Using npm

For React Native:

npm install tw-styler/native

For Web:

npm install tw-styler/web

Usage

React Native Example

import React from 'react';
import { Text, View } from 'react-native';
import tailwindStyled from 'tw-styler/native';  // Import for React Native

const Container = tailwindStyled(View)<{ isChecked?: boolean; isCorrect?: boolean }>`
  flex-1
  justify-center
  align-items: center;
  border-width: 2px;
  border-color: ${({ isChecked, isCorrect }) =>
    !isChecked ? 'gray' : isCorrect ? 'green' : 'red'};
`;

const App = () => {
  return (
    <Container isChecked={true} isCorrect={false}>
      <Text style={{ color: 'white' }}>This container has dynamic styles</Text>
    </Container>
  );
};

export default App;

Web Example

import React from 'react';
import { Text } from 'react-native';
import tailwindStyled from 'tw-styler/web';  // Import for Web

const Container = tailwindStyled('div')<{ isChecked?: boolean; isCorrect?: boolean }>`
  flex
  justify-center
  items-center
  border-width: 2px
  border-color: ${({ isChecked, isCorrect }) =>
    !isChecked ? 'gray' : isCorrect ? 'green' : 'red'}
`;

const App = () => {
  return (
    <Container isChecked={true} isCorrect={false}>
      <Text style={{ color: 'white' }}>This container has dynamic styles</Text>
    </Container>
  );
};

export default App;

Features

• Utility-first styling: Combine Tailwind CSS utilities with Styled Components.
• Dynamic Styles: Easily apply dynamic styles based on props.
• Cross-platform: Works for both React Native and Web.
• No boilerplate: Clean and minimal API for styling your components.

Props

• tailwindClasses: (optional) Tailwind CSS classes (string or array of strings).
• Dynamic Props: Any other props can be used to apply dynamic styles (e.g., border-color, margin, padding, etc.).

TypeScript Support

This library is fully typed for TypeScript. The tailwindStyled function and props are type-safe.

Contributing

Feel free to fork this repository and submit pull requests. Ensure that your changes include tests and proper documentation.

License

This project is licensed under the MIT License - see the LICENSE file for details.