SolidStart-TanStackQuery-Tailwind-Modules

This starter kit features SolidStart, combined with TanStack Query, and Tailwind CSS, and CSS Modules.

Table of Contents

• Overview
  • Tech Stack
  • Included Tooling
  • Example Components
• Installation
  • CLI
  • Manual
• Commands
• Demo Implementation

Overview

Tech Stack

• SolidStart
• TanStack Query
• Tailwind CSS
• CSS Modules

Included Tooling

• Vitest - Test runner
• Storybook - Component library
• Typescript - Type checking
• ESLint - Code linting
• Prettier - Code formatting

Example Components

Counter src/components/CounterExample

A small counter example that showcases how to use state in SolidStart. You can view the example on the src/pages/Counter.

Signals can live outside of components. Each relevant component subscribes to its value by using it.

Fetch src/components/FetchExample

Demonstrates how to retrieve data from a third-party API by using createResource.

Installation

This README is written with npm in mind but you can use other manager runners (yarn, pnpm, etc.)

CLI (Recommended)

npm create @this-dot/starter --kit solidstart-tanstackquery-tailwind-modules

• Follow the prompts to select the solidstart-tanstackquery-tailwind-modules starter kit and name your new project.
• cd into your project directory and run npm install.
• Run npm run dev to start the development server.
• Open your browser to http://localhost:5173 to see the included example code running.

Manual

git clone https://github.com/thisdot/starter.dev.git

• Copy and rename the starters/solidstart-tanstackquery-tailwind-modules directory to the name of your new project.
• cd into your project directory and run npm install.
• Run npm run dev to start the development server.
• Open your browser to http://localhost:5173 to see the included example code running.

Commands

• dev - Starts a development server backed by Vite on localhost port 5173 with HMR
• build - Builds a production version of the app to deploy
• start - Starts the production build with a local version of adapter
• test - Runs the test suite
• storybook - To showcase the component library
• lint - Uses eslint to find potential issues in the codebase
• lint-fix - Tries to auto-fix potential issues
• format - Fixes formatting issues in the codebase