Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mathiasgilson/tailwind-styled-component
Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering
https://github.com/mathiasgilson/tailwind-styled-component
css css-in-js react styled-components tailwind tailwind-css tailwindcss tailwindcss-plugin tailwindcss-ui typescript
Last synced: 5 days ago
JSON representation
Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering
- Host: GitHub
- URL: https://github.com/mathiasgilson/tailwind-styled-component
- Owner: MathiasGilson
- License: mit
- Created: 2020-11-12T17:58:50.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-30T16:41:37.000Z (6 months ago)
- Last Synced: 2024-10-29T17:12:07.977Z (3 months ago)
- Topics: css, css-in-js, react, styled-components, tailwind, tailwind-css, tailwindcss, tailwindcss-plugin, tailwindcss-ui, typescript
- Language: TypeScript
- Homepage:
- Size: 564 KB
- Stars: 816
- Watchers: 4
- Forks: 44
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwind-Styled-Component
Create tailwind css react components like styled components with classes name on multiple lines
[![NPM version][npm-image]][npm-url]
[npm-image]: http://img.shields.io/npm/v/tailwind-styled-components.svg?style=flat-square
[npm-url]: http://npmjs.org/package/tailwind-styled-components
#### Before 😬
```
```
#### After 🥳
``
```js
const Button = tw.div`
${(p) => (p.$primary ? "bg-indigo-600" : "bg-indigo-300")}
flex
inline-flex
items-center
border
border-transparent
text-xs
font-medium
rounded
shadow-sm
text-white
hover:bg-indigo-700
focus:outline-none
`
```
## Features
♻️ Reusable
🧩 Extendable
💅 Compatible with Styled Components
⚡️ Use props like every React Component
🤯 Stop editing 400+ characters lines
🧘 Cleaner code in the render function
## Install
Using [npm](http://npmjs.org/package/tailwind-styled-components)
```bash
npm i -D tailwind-styled-components
```
Using [yarn](https://yarnpkg.com)
```
yarn add -D tailwind-styled-components
```
*⚠️ This extension requires TailwindCSS to be installed and configured on your project too. [Install TailwindCSS](https://tailwindcss.com/docs/installation)*
#### [Optional] Configure IntelliSense autocomplete on VSCode
First, install Tailwind CSS IntelliSense VSCode extension
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
Then add these user settings ([How to edit VSCode settings?](https://code.visualstudio.com/docs/getstarted/settings))
```js
"tailwindCSS.includeLanguages": {
"typescript": "javascript", // if you are using typescript
"typescriptreact": "javascript" // if you are using typescript with react
},
"editor.quickSuggestions": {
"strings": true // forces VS Code to trigger completions when editing "string" content
},
"tailwindCSS.experimental.classRegex": [
"tw`([^`]*)", // tw`...`
"tw\\.[^`]+`([^`]*)`", // tw.xxx`...`
"tw\\(.*?\\).*?`([^`]*)" // tw(Component)`...`
]
```
## Usage
### Import
```js
import tw from "tailwind-styled-components"
```
### Basic
Create a Tailwind Styled Component with Tailwind rules that you can render directly
```js
const Container = tw.div`
flex
items-center
justify-center
flex-col
w-full
bg-indigo-600
`
```
```js
render(
Use the Container as any other React Component
)
```
Will be rendered as
```html
Use the Container as any other React Component
```
### Conditional class names
Set tailwind class conditionally with the same syntax as [styled components](https://styled-components.com/docs/basics#adapting-based-on-props)
```ts
interface ButtonProps {
$primary: boolean
}
const Button = tw.button`
flex
${(p) => (p.$primary ? "bg-indigo-600" : "bg-indigo-300")}
`
```
*Tailwind Styled Components supports [Transient Props](https://styled-components.com/docs/api#transient-props)*
*Prefix the props name with a dollar sign ($) to prevent forwarding them to the DOM element*
```jsx
```
Will be rendered as
```html
```
and
```jsx
```
Will be rendered as
```html
```
---
**Be sure to set the entire class name**
✅ Do `${p => p.$primary ? "bg-indigo-600" : "bg-indigo-300"}`
❌ Don't `bg-indigo-${p => p.$primary ? "600" : "300"}`
---
### Extends
```js
const DefaultContainer = tw.div`
flex
items-center
`
```
```js
const RedContainer = tw(DefaultContainer)`
bg-red-300
`
```
Will be rendered as
```html
```
### Extends Styled Component
Extend [styled components](https://github.com/styled-components/styled-components)
```js
const StyledComponentWithCustomCss = styled.div`
filter: blur(1px);
`
const = tw(StyledComponentWithCustomCss)`
flex
`
```
*Css rule `filter` is not supported by default on TailwindCSS*
Will be rendered as
```html
```
### Polymorphic Components
If you want to keep all the styling you've applied to a component but just switch out what's being ultimately rendered (be it a different HTML tag or a different custom component), you can use the `$as` prop to do this at runtime.
```js
const Button = tw.button`inline-flex items-center p-2`
Link
```
Will render as
```html
Link
```
## Example
```tsx
import React from "react"
import tw from "tailwind-styled-components"
import styled from "styled-components"
// Create a react component that renders an
which is
// indigo and sized at 1.125rem
interface TitleProps {
$large: boolean;
}
const Title = tw.h1`
${(p) => (p.$large ? "text-lg" : "text-base")}
text-indigo-500
`
// Create a react component that renders a with
// a special blue background color
const SpecialBlueContainer = styled.section`
background-color: #0366d6;
`
// Create a react component that extends the SpecialBlueContainer to render
// a tailwind with the special blue background and adds the flex classes
const Container = tw(SpecialBlueContainer)`
flex
items-center
justify-center
w-full
`
// Use them like any other React component – except they're styled!
render(
Hello World, this is my first tailwind styled component!
)
```
Sponsored by [qualtir.com](https://qualtir.com)