Nibbling Pastry Monster

    TypeScript icon, indicating that this package has built-in type declarations

    0.6.6 • Public • Published


    A set of modules is for CSS-in-JS solution that includes state-to-style bindings, SSR and next-level developer experience. It includes a framework-agnostic implementation

    NPM Version Discord


    Framework-agnostic version:

    # with npm
    npm install tastycss
    # with yarn
    yarn add tastycss

    React version:

    # with npm
    npm install tastycss-react
    # with yarn
    yarn add tastycss-react


    TastyCSS utils allow generating performant CSS with responsiveness and style-to-state bindings.

    TastyCSS React is a styled version for React Apps that uses styled-components under-the-hood.


    Let's look at styled API:

    import styled from 'tastycss-react';
    const Element = styled({
      /** The name of the element. It can be used to override styles in context. */
      name: 'Article',
      /** The tag name of the element. */
      tag: 'span',
      /** Default styles of the element. */
      styles: {
        // tokens
        '@local-padding': ['2x', '1x'], // responsive styles
        '@text-color': 'rgba(255, 0, 0)',
        // styles
        padding: '@local-padding',
        color: {
          // the default color
          '': '#text',
          // the color if `blue` mod is specified
          blue: 'blue',
        }, // use color token
      /** Default raw css of the element. */
      css: `
        appearance: none;
      /** Default attributes */
      attrs: {
        role: 'article',
      availableMods: ['blue'],

    Now you can use this element inside your React App:

    export default function Component({ title, children }) {
      return <>

    Customize styles in-place using styles attribute:

    <Element styles={{ color: 'red' }}>{chidlren}</Element>

    Customize styles in context:

    import { StylesProvider } from 'tastycss-react';
    export default function Component({ title, children }) {
      return <StylesProvider Article={{
        color: 'red',

    Responsive breakpoints

    Customize responsive breakpoints:

    import { BreakpointsProvider } from 'tastycss-react';
    export default function Component({ title, children }) {
      return <BreakpointsProvider value={[1200, 960]}>

    This will create two breakpoints (1200px and 960px) which will split possible screen width into three zones: >=1200px, >=960px & <1200px, <960px.

    Then you can create responsive styles with specific value for each zone:

    <Element styles={{ 
      color: [
        'red', // >=1200px
        'blue', // >=960px & <1200px
        'purple', // <960px

    Style-to-state bindings

    Style-to-state binding works gracefully and allows to use logical operators:

    // This example is not a real-life case. It's only a demonstation of library capabilities.
    <Element styles={{
      color: {
        // default
        '': 'yellow',
        // if `blue` mod is presented on the element
        'blue': 'blue',
        // if `blue` mod is not presented on the element and the element is hovered
        '!blue & :hover': 'purple',
        // if `green` or `success` mod is presented on the element
        'success | green': 'green',
        // if either `red` or `danger` mod is presented on the element
        'success ^ green': 'green',

    You can use even more complex expressions with brackets. The algorithm will go from the last to the first expression trying to match every possible combination of modifiers. If the combination is matched then it applies the style value to that selector.

    This documentation is work in progress. It is not yet ready.


    Please follow our contributing guidelines.



    TastyCSS is a project by Forneu.

    Released under the MIT License.


    npm i tastycss-react

    DownloadsWeekly Downloads






    Unpacked Size

    67.1 kB

    Total Files


    Last publish


    • tenphi
    • katrin_luna
    • shubhamkaushal