Extended component of a styled-components
that prioritizes class names for use in Tailwind CSS
.
Using the template literal grammar, you can write the class name and CSS code to the component. Like styled-components
!
Available in styled-components
v5 and above.
With vscode-twined-components, syntax highlight and intellisense is supported when entering classname and css code.
// with Tailwind CSS
const Button = twined.button`
text-white bg-indigo-500 rounded-lg
`;
// with Fontawesome
const IconReact = twined.i`
fab fa-react
`;
Twined-components
is an extended component of styled-components
that returns styled-component.
Most of the CSS frameworks are created based on classnames. Styled-components
can also write the classname. But, it is designed to make it easier to enter css code than to write the classname. However, we usually write the classname first and modify the details by writing down the CSS code, when using the CSS framework. Twined-components
are designed to write class names first.
Twined-components
is a component that simply extends styled-components
. Therefore, dependence on styled-components
is needed.
npm i styled-components twined-components
// with Tailwind CSS
// with Fontawesome
import React from "react";
import twined from "twined-components";
// button base
const BorderlessButton = twined.button`
border-0 px-6 py-2 rounded-lg
`;
// close button
const Close = twined(BorderlessButton)`
hidden absolute right-0 top-0 transform translate-x-1/2 -translate-y-1/2 w-10 h-10 bg-black text-white rounded-full
items-center justify-center
fas fa-times
`;
const ModalBackground = twined.div`
fixed w-full h-full flex items-center justify-center bg-black bg-opacity-25 box-border p-10
`;
// Close is styled-components, so you can use the classname of Close.
const Modal = twined.div`
relative flex items-center justify-center w-full h-full p-4 bg-white shadow text-2xl rounded-lg
`.css`
:hover ${Close} {
display: flex;
}
`;
// Twined-components returns styled-components and can be expanded. It also optionally supports writing CSS as a JavaScript object instead of CSS code.
const Button = twined(BorderlessButton)`
block ml-5
`.css(({ primary }) => ({
...(primary && { color: "white", background: "salmon", fontWeight: "bold" }),
}));
<ModalBackground>
<Modal>
Hello World, this is my first twined component!
<Button primary>Ok</Button>
<Close />
</Modal>
</ModalBackground>;
import twined from "twined-components";
const Button = twined.button<{primary: boolean}>`
${({parimary}) => parimary : 'text-white bg-indigo-500' : ''} border-0 px-6 py-2 rounded-lg
`.css`
text-align: center;
${({parimary}) => parimary : 'font-weight: bold;' : ''}
`;
<Button primary>Click</Button>
Type support is similar to styled-components
. The props specified with the type is delivered equally to the class and css regions.
It also works in styled-components
v4.1.0 version and later, but has several limitations.
Unable to expand classname. Instead, styled-component
can be extended. Example
When delivering styled-components
to props in css method, could not get corresponding classname from scss code.
- Add Syntax highlighting
- Add Type inference
- Add Test code