README.md

Twin + Vite + Solid + TypeScript

---

Integration status

This integration is new so we're missing some types still (submit improvements please).

• Styled array syntax works but there are no types for it yet:

  const Component = styled('button')(props => [tw`bg-black`])

  Use object syntax instead:

  const Component = styled('button')(props => ({ ...tw`bg-black` }))

• @emotion/serialize is used for the css prop types.

---

Download this example using degit

npx degit https://github.com/ben-rogerson/twin.examples/vite-solid-typescript folder-name

From within the new folder, run npm install, then npm run dev to start the dev server.

Table of contents

• Getting started
  • Installation
  • Add the global styles
  • Add the twin config
  • Add the vite config
  • Add TypeScript types
• Customization
• Next steps

Getting started

Installation

Install Vite with the Solid TypeScript template

npm create vite@latest my-app -- --template solid-ts

Install the dependencies

npm install ts-deepmerge twin.macro solid-styled-components babel-plugin-macros tailwindcss
npm install -D @emotion/serialize

• ts-deepmerge is used to deeply merge the twin with your own global styles.

Add the global styles

Twin uses the same preflight base styles as Tailwind to smooth over cross-browser inconsistencies.

The GlobalStyles import adds these base styles along with some @keyframes for the animation classes and some global css that makes the ring classes and box-shadows work.

You can import GlobalStyles within a new file placed in src/styles/GlobalStyles.tsx:

// src/styles/GlobalStyles.tsx
import { StylesArg, createGlobalStyles } from 'solid-styled-components'
import tw, { theme, globalStyles } from 'twin.macro'
import merge from 'ts-deepmerge'

const CustomStyles = {
  body: {
    WebkitTapHighlightColor: theme`colors.purple.500`,
    ...tw`antialiased`,
  },
}

const GlobalStyles = createGlobalStyles(
  merge(globalStyles, CustomStyles) as StylesArg,
)

export default GlobalStyles

Then import the GlobalStyles file in src/index.tsx:

// src/index.tsx
/* @refresh reload */
import { render } from 'solid-js/web'
import App from './App'
import GlobalStyles from './styles/GlobalStyles'

const root = document.getElementById('root')

render(
  () => (
    <>
      <GlobalStyles />
      <App />
    </>
  ),
  root!,
)

Add the twin config

Twin’s config can be added in a couple of different files.

a) Either in babel-plugin-macros.config.js:

// babel-plugin-macros.config.js
module.exports = {
  twin: {
    preset: 'solid',
  },
}

b) Or in package.json:

// package.json
"babelMacros": {
  "twin": {
    "preset": "solid"
  }
},

Add the vite config

Add the following to your vite config:

// vite.config.ts
import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'

export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      target: 'es2020',
    },
  },
  plugins: [
    solid({
      babel: {
        plugins: ['babel-plugin-macros'],
      },
    }),
  ],
})

Add TypeScript types

Create a types/twin.d.ts file with the declarations from the example:

mkdir types && cd $_ && curl -o twin.d.ts -L https://github.com/ben-rogerson/twin.examples/raw/master/vite-solid-typescript/types/twin.d.ts

Then add the types folder to the include array in your typescript config:

// tsconfig.json
{
  // ...
  "include": ["src", "types"]
}

Customization

• View the config options →
• Customizing the tailwind config →

Next steps

Learn how to work with twin

• The prop styling guide - A must-read guide to level up on prop styling
• The styled component guide - A must-read guide on getting productive with styled-components

Learn more about solid-styled-components