react-tailstrap

React-TailStrap

A Component Library for React and Tailwindcss. Tailwindcss is a utility base CSS framework and Bootstrap is a component base CSS Framework.

And react-tailstrap is a tailwindcss library that builds on top of tailwindcss but that have all bootstrap component it means you can use Bootstrap components into your tailwindcss projects And gonna provide others components also.

Get Started

1. Install Tailwindcss in your project

2. Install react-tailstrap using npm

npm i react-tailstrap

1. add react-tailstrap path in you tailwind.config.js file content sections. Like this:

content: [
  './index.html',
  './src/**/*.{js,ts,jsx,tsx}',
  './node_modules/react-tailstrap/src/**/*.{js,ts,jsx,tsx}',
];

or

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/react-tailstrap/src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

How to user react-tailstrap

Demo Code

import React from 'react';

import { Button, Alert } from 'react-tailstrap';

const App = () => {
  return (
    <div>
      {/* Alert */}
      <Alert variant="primary"> an alert </Alert>
      {/* Button */}
      <Button variant="primary">Primary</Button> <br />
    </div>
  );
};

export default App;

Others Components are coming soon

under Development / unusable version