diff --git a/docs/options.md b/docs/options.md
index 244545e..cdf83e3 100644
--- a/docs/options.md
+++ b/docs/options.md
@@ -4,20 +4,19 @@
 
 These options are available in your [twin config](#twin-config-location):
 
-| Name                        | Default                | Description                                                                                                                                                                                                                                   |
-| --------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| config                      | `"tailwind.config.js"` | The path to your Tailwind config. Also takes a config object.                                                                                                                                                                                 |
-| preset                      | `"emotion"`            | The css-in-js library behind the scenes.<br>Also supported: `"styled-components"` `"goober"` `"stitches"`                                                                                                                                     |
-| dataTwProp                  | `true`                 | Add a prop to jsx components in development showing the original tailwind classes.<br/> Use `"all"` to keep the prop in production.                                                                                                           |
-| debug                       | `false`                | Display information in your terminal about the Tailwind class conversions.                                                                                                                                                                    |
-| disableShortCss             | `true`                 | Disable converting short css within the tw import/prop.                                                                                                                                                                                       |
-| hasLogColors                | `true`                 | Disable log colors to remove the glyphs when the color display is not supported                                                                                                                                                               |
-| includeClassNames           | `false`                | Look in className props for tailwind classes to convert.                                                                                                                                                                                      |
-| dataCsProp                  | `true`                 | Add a prop to your elements in development so you can see the original cs prop classes, eg: `<div data-cs="maxWidth[1em]" />`.                                                                                                                |
-| disableCsProp               | `true`                 | Disable twin from reading values specified in the cs prop.                                                                                                                                                                                    |
-| sassyPseudo                 | `false`                | Some css-in-js frameworks require the `&` in selectors like `&:hover`, this option ensures it’s added.                                                                                                                                        |
-| moveKeyframesToGlobalStyles | `false`                | `@keyframes` are added next to the `animation-x` classes - this option can move them to global styles instead.                                                                                                                                |
-| autoCssProp                 | _deprecated in v2.8.2_ | `styled-components` only: Used to add an import of 'styled-components/macro' which automatically adds the styled-components css prop. Here’s how to [setup the new styled-components css prop](https://twinredirect.page.link/auto-css-prop). |
+| Name                        | Default                | Description                                                                                                                         |
+| --------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| config                      | `"tailwind.config.js"` | The path to your Tailwind config. Also takes a config object.                                                                       |
+| preset                      | `"emotion"`            | The css-in-js library behind the scenes.<br>Also supported: `"styled-components"` `"goober"` `"stitches"` `"solid"`                 |
+| dataTwProp                  | `true`                 | Add a prop to jsx components in development showing the original tailwind classes.<br/> Use `"all"` to keep the prop in production. |
+| debug                       | `false`                | Display information in your terminal about the Tailwind class conversions.                                                          |
+| disableShortCss             | `true`                 | Disable converting short css within the tw import/prop.                                                                             |
+| hasLogColors                | `true`                 | Disable log colors to remove the glyphs when the color display is not supported                                                     |
+| includeClassNames           | `false`                | Check className attributes for tailwind classes to convert.                                                                         |
+| dataCsProp                  | `true`                 | Add a prop to your elements in development so you can see the original cs prop classes, eg: `<div data-cs="maxWidth[1em]" />`.      |
+| disableCsProp               | `true`                 | Disable twin from reading values specified in the cs prop.                                                                          |
+| sassyPseudo                 | `false`                | Some css-in-js frameworks require the `&` in selectors like `&:hover`, this option ensures it’s added.                              |
+| moveKeyframesToGlobalStyles | `false`                | `@keyframes` are added next to the `animation-x` classes - this option can move them to global styles instead.                      |
 
 ### Options
 
diff --git a/docs/styled-component-guide.md b/docs/styled-component-guide.md
index 1fbb6ad..23da382 100644
--- a/docs/styled-component-guide.md
+++ b/docs/styled-component-guide.md
@@ -49,7 +49,7 @@ interface ContainerProps {
   hasBg?: string
 }
 
-const Container = styled.div(({ hasBg }: ContainerProps) => [
+const Container = styled.div<ContainerProps>(({ hasBg }) => [
   tw`flex w-full`, // Add base styles first
   hasBg && tw`bg-black`, // Then add conditional styles
 ])
@@ -342,6 +342,7 @@ Use a theme value to grab a value from your tailwind.config:
 
 ```js
 tw.div`[color:theme('colors.gray.300')]`
+tw.div`[margin:theme('spacing[2.5]')]`
 tw.div`[box-shadow: 5px 10px theme('colors.black')]`
 ```
 
diff --git a/src/core/createCoreContext.ts b/src/core/createCoreContext.ts
index ea86674..1d72fb5 100644
--- a/src/core/createCoreContext.ts
+++ b/src/core/createCoreContext.ts
@@ -18,10 +18,14 @@ import type {
 
 function packageCheck(
   packageToCheck: PossiblePresets,
-  params: GetPackageConfig
+  params: GetPackageConfig,
+  hasNoFallback?: boolean
 ): boolean {
+  if (params.config && params.config.preset === packageToCheck) return true
+
+  if (hasNoFallback) return false
+
   return (
-    (params.config && params.config.preset === packageToCheck) ||
     params.styledImport.from.includes(packageToCheck) ||
     params.cssImport.from.includes(packageToCheck)
   )
@@ -36,8 +40,9 @@ type GetPackageConfig = {
 function getPackageUsed(params: GetPackageConfig): GetPackageUsed {
   return {
     isEmotion: packageCheck('emotion', params),
-    isStyledComponents: packageCheck('styled-components', params),
+    isStyledComponents: packageCheck('styled-components', params, true),
     isGoober: packageCheck('goober', params),
+    isSolid: packageCheck('solid', params),
     isStitches: packageCheck('stitches', params),
   }
 }
diff --git a/src/core/lib/twinConfig.ts b/src/core/lib/twinConfig.ts
index f0038cc..c4db82a 100644
--- a/src/core/lib/twinConfig.ts
+++ b/src/core/lib/twinConfig.ts
@@ -5,7 +5,8 @@ const TWIN_CONFIG_DEFAULTS = {
   autoCssProp: false,
   config: undefined,
   convertHtmlElementToStyled: false,
-  convertStyledDot: false,
+  convertStyledDotToParam: false,
+  convertStyledDotToFunction: false,
   css: { import: '', from: '' },
   dataCsProp: false,
   dataTwProp: false,
@@ -21,26 +22,38 @@ const TWIN_CONFIG_DEFAULTS = {
   sassyPseudo: false,
   stitchesConfig: undefined,
   styled: { import: '', from: '' },
-}
+} as const
 
 // Defaults for different css-in-js libraries
-const configDefaultsGoober = { sassyPseudo: true } // Sets selectors like hover to &:hover
+const configDefaultsGoober = {
+  sassyPseudo: true, // Sets selectors like hover to &:hover
+} as const
+
+const configDefaultsSolid = {
+  sassyPseudo: true, // Sets selectors like hover to &:hover
+  moveTwPropToStyled: true, // Move the tw prop to a styled definition
+  convertHtmlElementToStyled: true, // Add a styled definition on css prop elements
+  convertStyledDotToFunction: true, // Convert styled.[element] to a default syntax
+} as const
+
 const configDefaultsStitches = {
   sassyPseudo: true, // Sets selectors like hover to &:hover
-  convertStyledDot: true, // Convert styled.[element] to a default syntax
+  convertStyledDotToParam: true, // Convert styled.[element] to a default syntax
   moveTwPropToStyled: true, // Move the tw prop to a styled definition
-  convertHtmlElementToStyled: true, // For packages like stitches, add a styled definition on css prop elements
+  convertHtmlElementToStyled: true, // Add a styled definition on css prop elements
   stitchesConfig: undefined, // Set the path to the stitches config
   moveKeyframesToGlobalStyles: true, // Stitches doesn't support inline @keyframes
-}
+} as const
 
 function configDefaultsTwin({
+  isSolid,
   isGoober,
   isStitches,
   isDev,
 }: GetPackageUsed & { isDev: boolean }): TwinConfigAll {
   return {
     ...TWIN_CONFIG_DEFAULTS,
+    ...(isSolid && configDefaultsSolid),
     ...(isGoober && configDefaultsGoober),
     ...(isStitches && configDefaultsStitches),
     dataTwProp: isDev,
@@ -52,7 +65,13 @@ function isBoolean(value: unknown): boolean {
   return typeof value === 'boolean'
 }
 
-const allowedPresets = ['styled-components', 'emotion', 'goober', 'stitches']
+const allowedPresets = [
+  'styled-components',
+  'emotion',
+  'goober',
+  'stitches',
+  'solid',
+]
 
 type ConfigTwinValidators = Record<
   keyof typeof TWIN_CONFIG_DEFAULTS & 'disableColorVariables',
@@ -76,6 +95,10 @@ const configTwinValidators: ConfigTwinValidators = {
     (value: unknown): boolean => !value,
     'The “autoCssProp” feature has been removed from twin.macro@2.8.2+\nThis means the css prop must be added by styled-components instead.\nSetup info at https://twinredirect.page.link/auto-css-prop\n\nRemove the “autoCssProp” item from your config to avoid this message.',
   ],
+  convertStyledDot: [
+    (value: unknown): boolean => !value,
+    'The “convertStyledDot” feature was changed to “convertStyledDotParam”.',
+  ],
   disableColorVariables: [
     (value: unknown): boolean => !value,
     'The disableColorVariables feature has been removed from twin.macro@3+\n\nRemove the disableColorVariables item from your config to avoid this message.',
@@ -97,9 +120,13 @@ const configTwinValidators: ConfigTwinValidators = {
     isBoolean,
     'The config “disableCsProp” can only be a boolean',
   ],
-  convertStyledDot: [
+  convertStyledDotToParam: [
+    isBoolean,
+    'The config “convertStyledDotToParam” can only be a boolean',
+  ],
+  convertStyledDotToFunction: [
     isBoolean,
-    'The config “convertStyledDot” can only be a boolean',
+    'The config “convertStyledDotToFunction” can only be a boolean',
   ],
   moveTwPropToStyled: [
     isBoolean,
diff --git a/src/core/lib/userPresets.ts b/src/core/lib/userPresets.ts
index bafe980..c651eb4 100644
--- a/src/core/lib/userPresets.ts
+++ b/src/core/lib/userPresets.ts
@@ -29,6 +29,11 @@ const userPresets = {
     css: { import: 'css', from: 'stitches.config' },
     global: { import: 'global', from: 'stitches.config' },
   },
+  solid: {
+    styled: { import: 'styled', from: 'solid-styled-components' },
+    css: { import: 'css', from: 'solid-styled-components' },
+    global: { import: 'createGlobalStyles', from: 'solid-styled-components' },
+  },
 }
 
 export default userPresets
diff --git a/src/core/types/index.ts b/src/core/types/index.ts
index 58f24dc..87a4f38 100644
--- a/src/core/types/index.ts
+++ b/src/core/types/index.ts
@@ -44,7 +44,8 @@ export type TwinConfigAll = {
   disableCsProp: boolean
   disableShortCss: boolean
   config?: string | Partial<TailwindConfig>
-  convertStyledDot?: boolean
+  convertStyledDotToParam?: boolean
+  convertStyledDotToFunction?: boolean
   moveTwPropToStyled?: boolean
   moveKeyframesToGlobalStyles?: boolean
   convertHtmlElementToStyled?: boolean
@@ -133,6 +134,7 @@ export type GetPackageUsed = {
   isStyledComponents: boolean
   isGoober: boolean
   isStitches: boolean
+  isSolid: boolean
 }
 
 export type TailwindMatchOptions = {
diff --git a/src/macro/css.ts b/src/macro/css.ts
index 0c347f8..98220cd 100644
--- a/src/macro/css.ts
+++ b/src/macro/css.ts
@@ -59,6 +59,7 @@ function convertHtmlElementToStyled(
     ...params,
     jsxPath,
     secondArg: t.objectExpression([]),
+    fromProp: 'css',
   })
 }
 
diff --git a/src/macro/globalStyles.ts b/src/macro/globalStyles.ts
index 5c42cbc..16a9319 100644
--- a/src/macro/globalStyles.ts
+++ b/src/macro/globalStyles.ts
@@ -186,7 +186,7 @@ function handleGlobalStylesJsx(params: AdditionalHandlerParameters): void {
     state.isImportingCss = !state.existingCssIdentifier
   }
 
-  if (coreContext.packageUsed.isGoober) {
+  if (coreContext.packageUsed.isGoober || coreContext.packageUsed.isSolid) {
     const declaration = getGlobalDeclarationTte(declarationData)
     program.unshiftContainer('body', declaration)
     path.replaceWith(t.jSXIdentifier(globalUid.name))
diff --git a/src/macro/lib/astHelpers.ts b/src/macro/lib/astHelpers.ts
index 20ad036..4141700 100644
--- a/src/macro/lib/astHelpers.ts
+++ b/src/macro/lib/astHelpers.ts
@@ -260,7 +260,7 @@ function parseTte(
 
 function replaceWithLocation<EmptyArray>(
   path: NodePath,
-  replacement: NodePath | T.Expression
+  replacement: NodePath | T.Expression | T.ExpressionStatement
 ): [NodePath] | EmptyArray[] {
   const { loc } = path.node
   const newPaths = replacement ? path.replaceWith(replacement) : []
@@ -418,6 +418,55 @@ type MakeStyledComponent = {
   program: NodePath<T.Program>
   state: State
   coreContext: CoreContext
+  fromProp: 'tw' | 'css'
+}
+
+type CreateStyledProps = Pick<
+  MakeStyledComponent,
+  'jsxPath' | 't' | 'secondArg'
+> & {
+  stateStyled: T.Identifier
+  constName: T.Identifier
+  firstArg: T.MemberExpression | T.Identifier | T.StringLiteral
+}
+
+function createStyledPropsForTw({
+  t,
+  stateStyled,
+  firstArg,
+  secondArg,
+  constName,
+}: CreateStyledProps): T.VariableDeclaration {
+  const callee = t.callExpression(stateStyled, [firstArg])
+  const declarations = [
+    t.variableDeclarator(constName, t.callExpression(callee, [secondArg])),
+  ]
+
+  return t.variableDeclaration('const', declarations)
+}
+
+function createStyledPropsForCss(
+  args: CreateStyledProps
+): T.VariableDeclaration | undefined {
+  const cssPropAttribute = args.jsxPath
+    .get('attributes')
+    .find(
+      p =>
+        p.isJSXAttribute() &&
+        p.get('name').isJSXIdentifier() &&
+        p.get('name')?.node.name === 'css'
+    )
+
+  const cssPropValue = cssPropAttribute?.get(
+    'value'
+  ) as NodePath<T.JSXExpressionContainer>
+
+  const expression = cssPropValue?.node?.expression
+  if (!expression || expression.type === 'JSXEmptyExpression') return
+
+  cssPropAttribute?.remove()
+
+  return createStyledPropsForTw({ ...args, secondArg: expression })
 }
 
 function makeStyledComponent({
@@ -427,6 +476,7 @@ function makeStyledComponent({
   program,
   state,
   coreContext,
+  fromProp,
 }: MakeStyledComponent): void {
   const constName = program.scope.generateUidIdentifier('TwComponent')
 
@@ -436,11 +486,23 @@ function makeStyledComponent({
   }
 
   const firstArg = getFirstStyledArgument(jsxPath, t, coreContext.assert)
+  let styledDefinition = null
+  const stateStyled: T.Identifier = state.styledIdentifier
+
+  if (coreContext.packageUsed.isSolid) {
+    const params = { jsxPath, t, stateStyled, firstArg, secondArg, constName }
+    styledDefinition =
+      fromProp === 'tw'
+        ? createStyledPropsForTw(params)
+        : createStyledPropsForCss(params)
+  } else {
+    const args = [firstArg, secondArg].filter(Boolean)
+    const init = t.callExpression(stateStyled, args)
+    const declarations = [t.variableDeclarator(constName, init)]
+    styledDefinition = t.variableDeclaration('const', declarations)
+  }
 
-  const args = [firstArg, secondArg].filter(Boolean)
-  const identifier = t.callExpression(state.styledIdentifier, args)
-  const styledProps = [t.variableDeclarator(constName, identifier)]
-  const styledDefinition = t.variableDeclaration('const', styledProps)
+  if (!styledDefinition) return
 
   const rootParentPath = jsxPath.findParent(p =>
     p.parentPath ? p.parentPath.isProgram() : false
diff --git a/src/macro/styled.ts b/src/macro/styled.ts
index 37fbff7..79414ad 100644
--- a/src/macro/styled.ts
+++ b/src/macro/styled.ts
@@ -42,12 +42,14 @@ function addStyledImport({
   })
 }
 
-function moveDotElementToParam({
+function moveDotElement({
   path,
   t,
+  moveToParam = true,
 }: {
   path: NodePath
   t: typeof T
+  moveToParam: boolean
 }): void {
   if (path.parent.type !== 'MemberExpression') return
 
@@ -62,11 +64,20 @@ function moveDotElementToParam({
     | T.SpreadElement
     | T.JSXNamespacedName
     | T.ArgumentPlaceholder
-  const args = [t.stringLiteral(styledName), styledArgs].filter(Boolean)
-  const replacement = t.callExpression(
-    (path as NodePath<T.Expression>).node,
-    args
-  )
+    | T.ArrowFunctionExpression
+
+  let replacement
+  if (moveToParam) {
+    // `styled('div', {})`
+    const args = [t.stringLiteral(styledName), styledArgs].filter(Boolean)
+    replacement = t.callExpression((path as NodePath<T.Expression>).node, args)
+  } else {
+    // `styled('div')({})`
+    const callee = t.callExpression((path as NodePath<T.Expression>).node, [
+      t.stringLiteral(styledName),
+    ])
+    replacement = t.expressionStatement(t.callExpression(callee, [styledArgs]))
+  }
 
   replaceWithLocation(parentCallExpression, replacement)
 }
@@ -76,18 +87,26 @@ function handleStyledFunction({
   t,
   coreContext,
 }: AdditionalHandlerParameters): void {
-  if (!coreContext.twinConfig.convertStyledDot) return
+  if (
+    !coreContext.twinConfig.convertStyledDotToParam &&
+    !coreContext.twinConfig.convertStyledDotToFunction
+  )
+    return
   if (isEmpty(references)) return
 
   const defaultRefs = references.default || []
   const styledRefs = references.styled || []
 
-  ;[...defaultRefs, ...styledRefs]
-    .filter(Boolean)
-    .forEach((path: NodePath): void => {
-      // convert tw.div`` & styled.div`` to styled('div', {})
-      moveDotElementToParam({ path, t })
+  const refs = [...defaultRefs, ...styledRefs].filter(Boolean)
+
+  refs.forEach((path: NodePath): void => {
+    // convert tw.div`` & styled.div`` to styled('div', {}) / styled('div')({})
+    moveDotElement({
+      path,
+      t,
+      moveToParam: coreContext.twinConfig.convertStyledDotToParam ?? true,
     })
+  })
 }
 
 export { updateStyledReferences, addStyledImport, handleStyledFunction }
diff --git a/src/macro/tw.ts b/src/macro/tw.ts
index b1084af..13f9bdd 100644
--- a/src/macro/tw.ts
+++ b/src/macro/tw.ts
@@ -34,7 +34,7 @@ type MoveTwPropToStyled = {
 function moveTwPropToStyled(params: MoveTwPropToStyled): void {
   const { jsxPath, astStyles } = params
 
-  makeStyledComponent({ ...params, secondArg: astStyles })
+  makeStyledComponent({ ...params, secondArg: astStyles, fromProp: 'tw' })
 
   // Remove the tw attribute
   const tagAttributes = jsxPath.node.attributes
diff --git a/tests/presetSolid.test.ts b/tests/presetSolid.test.ts
new file mode 100644
index 0000000..bc9d5e6
--- /dev/null
+++ b/tests/presetSolid.test.ts
@@ -0,0 +1,75 @@
+import { run, html } from './util/run'
+
+const twinConfig = { preset: 'solid' } as const
+
+test('tw prop', async () => {
+  const input = html`<div tw="block" />`
+  return run(input, undefined, twinConfig).then(result => {
+    expect(result).toMatchFormattedJavaScript(`
+      import { styled as _styled } from "solid-styled-components";
+      const _TwComponent = _styled("div")({ display: "block" });
+      React.createElement(_TwComponent, null);
+    `)
+  })
+})
+
+test('css prop', async () => {
+  const input = '<div css={[tw`block`]} />'
+  return run(input, undefined, twinConfig).then(result => {
+    expect(result).toMatchFormattedJavaScript(`
+      import { styled as _styled } from "solid-styled-components";
+      const _TwComponent = _styled("div")([{ display: "block" }]);
+      React.createElement(_TwComponent, null);
+    `)
+  })
+})
+
+test('tw dot', async () => {
+  const input = 'tw.div`block`'
+  return run(input, undefined, twinConfig).then(result => {
+    expect(result).toMatchFormattedJavaScript(`
+      import { styled as _styled } from "solid-styled-components";
+      _styled("div")({ display: "block" });
+    `)
+  })
+})
+
+test('tw', async () => {
+  const input = 'tw`block`'
+  return run(input, undefined, twinConfig).then(result => {
+    expect(result).toMatchFormattedJavaScript(`
+      ({ display: "block" });
+    `)
+  })
+})
+
+test('styled dot', async () => {
+  const input = 'styled.div``'
+  return run(input, undefined, twinConfig).then(result => {
+    expect(result).toMatchFormattedJavaScript(`
+      import { styled as _styled } from "solid-styled-components";
+      _styled.div\`\`;
+    `)
+  })
+})
+
+test('styled dot alt', async () => {
+  const input = 'styled.div([tw`block`])'
+  return run(input, undefined, twinConfig).then(result => {
+    expect(result).toMatchFormattedJavaScript(`
+      import { styled as _styled } from "solid-styled-components";
+      _styled("div")([{ display: "block" }]);
+    `)
+  })
+})
+
+test('GlobalStyles', async () => {
+  const input = html`<><GlobalStyles /></>`
+  return run(input, undefined, twinConfig).then(result => {
+    expect(result).toMatchFormattedJavaScript(`
+      import { createGlobalStyles as _globalImport } from "solid-styled-components";
+      const _GlobalStyles = _globalImport\`*, ::before, ::after {  box-sizing: border-box;  border-width: 0;  border-style: solid;  border-color: #e5e7eb;  --tw-border-spacing-x: 0;  --tw-border-spacing-y: 0;  --tw-translate-x: 0;  --tw-translate-y: 0;  --tw-rotate: 0;  --tw-skew-x: 0;  --tw-skew-y: 0;  --tw-scale-x: 1;  --tw-scale-y: 1;  --tw-pan-x: var(--tw-empty,/*!*/ /*!*/);  --tw-pan-y: var(--tw-empty,/*!*/ /*!*/);  --tw-pinch-zoom: var(--tw-empty,/*!*/ /*!*/);  --tw-scroll-snap-strictness: proximity;  --tw-ordinal: var(--tw-empty,/*!*/ /*!*/);  --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/);  --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/);  --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/);  --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/);  --tw-ring-offset-shadow: 0 0 #0000;  --tw-ring-shadow: 0 0 #0000;  --tw-shadow: 0 0 #0000;  --tw-shadow-colored: 0 0 #0000;  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);  --tw-ring-offset-width: 0px;  --tw-ring-offset-color: #fff;  --tw-ring-color: rgb(59 130 246 / 0.5);  --tw-blur: var(--tw-empty,/*!*/ /*!*/);  --tw-brightness: var(--tw-empty,/*!*/ /*!*/);  --tw-contrast: var(--tw-empty,/*!*/ /*!*/);  --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);  --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);  --tw-invert: var(--tw-empty,/*!*/ /*!*/);  --tw-saturate: var(--tw-empty,/*!*/ /*!*/);  --tw-sepia: var(--tw-empty,/*!*/ /*!*/);  --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);  --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);  --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);  --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);  --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);  --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);  --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);  --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);  --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);  --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);}::before, ::after {  --tw-content: '';}html {  line-height: 1.5;  -webkit-text-size-adjust: 100%;  -moz-tab-size: 4;  tab-size: 4;  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";  font-feature-settings:  normal;  font-variation-settings:  normal;}body {  margin: 0;  line-height: inherit;}hr {  height: 0;  color: inherit;  border-top-width: 1px;}abbr:where([title]) {  text-decoration: underline dotted;}h1, h2, h3, h4, h5, h6 {  font-size: inherit;  font-weight: inherit;}a {  color: inherit;  text-decoration: inherit;}b, strong {  font-weight: bolder;}code, kbd, samp, pre {  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;  font-size: 1em;}small {  font-size: 80%;}sub, sup {  font-size: 75%;  line-height: 0;  position: relative;  vertical-align: baseline;}sub {  bottom: -0.25em;}sup {  top: -0.5em;}table {  text-indent: 0;  border-color: inherit;  border-collapse: collapse;}button, input, optgroup, select, textarea {  font-family: inherit;  font-size: 100%;  font-weight: inherit;  line-height: inherit;  color: inherit;  margin: 0;  padding: 0;}button, select {  text-transform: none;}button, [type='button'], [type='reset'], [type='submit'] {  -webkit-appearance: button;  background-color: transparent;  background-image: none;}:-moz-focusring {  outline: auto;}:-moz-ui-invalid {  box-shadow: none;}progress {  vertical-align: baseline;}::-webkit-inner-spin-button, ::-webkit-outer-spin-button {  height: auto;}[type='search'] {  -webkit-appearance: textfield;  outline-offset: -2px;}::-webkit-search-decoration {  -webkit-appearance: none;}::-webkit-file-upload-button {  -webkit-appearance: button;  font: inherit;}summary {  display: list-item;}blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {  margin: 0;}fieldset {  margin: 0;  padding: 0;}legend {  padding: 0;}ol, ul, menu {  list-style: none;  margin: 0;  padding: 0;}textarea {  resize: vertical;}input::placeholder, textarea::placeholder {  opacity: 1;  color: #9ca3af;}button, [role="button"] {  cursor: pointer;}:disabled {  cursor: default;}img, svg, video, canvas, audio, iframe, embed, object {  display: block;  vertical-align: middle;}img, video {  max-width: 100%;  height: auto;}[hidden] {  display: none;}::backdrop {  --tw-border-spacing-x: 0;  --tw-border-spacing-y: 0;  --tw-translate-x: 0;  --tw-translate-y: 0;  --tw-rotate: 0;  --tw-skew-x: 0;  --tw-skew-y: 0;  --tw-scale-x: 1;  --tw-scale-y: 1;  --tw-pan-x: var(--tw-empty,/*!*/ /*!*/);  --tw-pan-y: var(--tw-empty,/*!*/ /*!*/);  --tw-pinch-zoom: var(--tw-empty,/*!*/ /*!*/);  --tw-scroll-snap-strictness: proximity;  --tw-ordinal: var(--tw-empty,/*!*/ /*!*/);  --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/);  --tw-numeric-figure: var(--tw-empty,/*!*/ /*!*/);  --tw-numeric-spacing: var(--tw-empty,/*!*/ /*!*/);  --tw-numeric-fraction: var(--tw-empty,/*!*/ /*!*/);  --tw-ring-offset-shadow: 0 0 #0000;  --tw-ring-shadow: 0 0 #0000;  --tw-shadow: 0 0 #0000;  --tw-shadow-colored: 0 0 #0000;  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);  --tw-ring-offset-width: 0px;  --tw-ring-offset-color: #fff;  --tw-ring-color: rgb(59 130 246 / 0.5);  --tw-blur: var(--tw-empty,/*!*/ /*!*/);  --tw-brightness: var(--tw-empty,/*!*/ /*!*/);  --tw-contrast: var(--tw-empty,/*!*/ /*!*/);  --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);  --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);  --tw-invert: var(--tw-empty,/*!*/ /*!*/);  --tw-saturate: var(--tw-empty,/*!*/ /*!*/);  --tw-sepia: var(--tw-empty,/*!*/ /*!*/);  --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);  --tw-backdrop-blur: var(--tw-empty,/*!*/ /*!*/);  --tw-backdrop-brightness: var(--tw-empty,/*!*/ /*!*/);  --tw-backdrop-contrast: var(--tw-empty,/*!*/ /*!*/);  --tw-backdrop-grayscale: var(--tw-empty,/*!*/ /*!*/);  --tw-backdrop-hue-rotate: var(--tw-empty,/*!*/ /*!*/);  --tw-backdrop-invert: var(--tw-empty,/*!*/ /*!*/);  --tw-backdrop-opacity: var(--tw-empty,/*!*/ /*!*/);  --tw-backdrop-saturate: var(--tw-empty,/*!*/ /*!*/);  --tw-backdrop-sepia: var(--tw-empty,/*!*/ /*!*/);}\`;
+      React.createElement(React.Fragment, null, React.createElement(_GlobalStyles, null));
+    `)
+  })
+})
diff --git a/types/index.d.ts b/types/index.d.ts
index 5708b9e..e1a8059 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -63,7 +63,7 @@ export type Config = {
   /**
    * The css-in-js library behind the scenes, default is `emotion`.
    */
-  preset?: 'styled-components' | 'emotion' | 'goober' | 'stitches'
+  preset?: 'styled-components' | 'emotion' | 'goober' | 'stitches' | 'solid'
   /**
    * Visit `style={...}` props/attributes for classes.
    */
@@ -77,9 +77,13 @@ export type Config = {
    */
   convertHtmlElementToStyled?: boolean
   /**
-   * Convert `styled.[element]` to a default syntax.
+   * Convert `styled.[element]``` to `styled('element', ({}))`.
    */
-  convertStyledDot?: boolean
+  convertStyledDotToParam?: boolean
+  /**
+   * Convert `styled.[element]``` to `styled('element')({})`.
+   */
+  convertStyledDotToFunction?: boolean
   /**
    * Add a prop to your elements in development so you can see the original cs prop classes, eg: `<div data-cs="maxWidth[1em]" />`.
    */