MathiasGilson / Tailwind Styled Component
Licence: mit
Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering
Stars: ✭ 57
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Tailwind Styled Component
Xstyled
A utility-first CSS-in-JS framework built for React. 💅👩🎤⚡️
Stars: ✭ 1,835 (+3119.3%)
Mutual labels: styled-components, tailwindcss, css-in-js
Twin.macro
🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Stars: ✭ 5,137 (+8912.28%)
Mutual labels: styled-components, tailwindcss, css-in-js
Atomize
library for creating atomic react components
Stars: ✭ 54 (-5.26%)
Mutual labels: styled-components, css-in-js
Design System
Priceline.com Design System
Stars: ✭ 604 (+959.65%)
Mutual labels: styled-components, css-in-js
Styled Theming
Create themes for your app using styled-components
Stars: ✭ 1,067 (+1771.93%)
Mutual labels: styled-components, css-in-js
Design System Utils
👩🎨 Access your design tokens with ease
Stars: ✭ 465 (+715.79%)
Mutual labels: styled-components, css-in-js
React Redux Saga Boilerplate
Starter kit with react-router, react-helmet, redux, redux-saga and styled-components
Stars: ✭ 535 (+838.6%)
Mutual labels: styled-components, css-in-js
Styled System
⬢ Style props for rapid UI development
Stars: ✭ 7,126 (+12401.75%)
Mutual labels: styled-components, css-in-js
Beamwind
a collection of packages to compile Tailwind CSS like shorthand syntax into CSS at runtime
Stars: ✭ 32 (-43.86%)
Mutual labels: tailwindcss, css-in-js
Styled Components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
Stars: ✭ 35,473 (+62133.33%)
Mutual labels: styled-components, css-in-js
Twind
The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.
Stars: ✭ 1,051 (+1743.86%)
Mutual labels: tailwindcss, css-in-js
Styled Breakpoints
Simple and powerful tool for creating breakpoints in styled components and emotion. 💅
Stars: ✭ 428 (+650.88%)
Mutual labels: styled-components, css-in-js
Glamorous Native
React Native component styling solved💄
Stars: ✭ 566 (+892.98%)
Mutual labels: styled-components, css-in-js
Glamorous
DEPRECATED: 💄 Maintainable CSS with React
Stars: ✭ 3,681 (+6357.89%)
Mutual labels: styled-components, css-in-js
Styled Tools
Useful interpolated functions for CSS-in-JS
Stars: ✭ 761 (+1235.09%)
Mutual labels: styled-components, css-in-js
Postjss
Use the power of PostCSS in compiling with JSS
Stars: ✭ 40 (-29.82%)
Mutual labels: styled-components, css-in-js
Reactackle
Open-source components library built with React and Styled-Components.
Stars: ✭ 278 (+387.72%)
Mutual labels: styled-components, css-in-js
Babel Plugin Tailwind Components
Use Tailwind with any CSS-in-JS library
Stars: ✭ 320 (+461.4%)
Mutual labels: tailwindcss, css-in-js
Polished
A lightweight toolset for writing styles in JavaScript ✨
Stars: ✭ 7,074 (+12310.53%)
Mutual labels: styled-components, css-in-js
Tailwind-Styled-Component
Create tailwind css react components like styled components with classes name on multiple lines
Install
# using npm
npm i -D tailwind-styled-components
# using yarn
yarn add -D tailwind-styled-components
Usage
Import
import tw from "tailwind-styled-components"
Basic
You can use tailwind-styled-components without using styled components
const Container = tw.div`
flex
items-center
justify-center
flex-col
w-full
bg-indigo-600
`
Will be rendered as
<div class="flex items-center justify-center flex-col w-full bg-indigo-600">
<!-- children -->
</div>
Conditional class names
Set tailwind class conditionaly with the same syntaxt as styled components
const Button = tw.button`
flex
${p => p.primary ? "bg-indigo-600" : "bg-indigo-300"}
`
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"}
<Button primary={true} />
Will be rendered as
<button class="flex bg-indigo-600">
<!-- children -->
</button>
and
<Button primary={false} />
Will be rendered as
<button class="flex bg-indigo-300">
<!-- children -->
</button>
Extends
const RedContainer = tw(Container)`
bg-red-600
`
Will be rendered as
<div class="flex items-center justify-center flex-col w-full bg-red-600">
<!-- children -->
</div>
Overrides the parent background color class
Extends Styled Component
Extend styled components
const StyledComponentWithCustomJs = styled.div`
filter: blur(1px);
`
const = tw(StyledComponentWithCustomJs)`
flex
`
Will be rendered as
<div class="flex" style="filter: blur(1px);">
<!-- children -->
</div>
Example
import React from "react"
import tw from "tailwind-styled-components"
import styled from "styled-components"
// Create a <Title> react component that renders an <h1> which is
// indigo and sized at 1.125rem
const Title = tw.h1`
${p => p.large ? "text-lg": "text-base"}
text-indigo-500
`
// Create a <SpecialBlueContainer> react component that renders a <section> with
// a special blue background color
const SpecialBlueContainer = styled.section`
background-color: #0366d6;
`
// Create a <Container> react component that extends the SpecialBlueContainer to render
// a tailwind <section> 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!
<Container>
<Title large={true}>Hello World, this is my first tailwind styled component!</Title>
</Container>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].