0.1.4 • Published 1 year ago
react-tailstrap v0.1.4
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
Install Tailwindcss in your project
Install react-tailstrap using npm
npm i react-tailstrap
- 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;