How to Install Tailwind CSS in SolidJS

A quick guide on how to install Tailwind CSS in your SolidJS project.

Article thumbnail image

Getting Started

First, we need to generate a Solid project.

You can skip this part if you already generated a project.

# If you wish to use JavaScript
npx degit solidjs/templates/js my-cool-app

# If you wish to use TypeScript
npx degit solidjs/templates/ts my-cool-app

Next, navigate into your project directory and install the dependencies.

cd my-cool-app
npm install

Next, we need to install Tailwind CSS, PostCSS & Autoprefixer.

npm install -D tailwindcss postcss autoprefixer

Next, generate your tailwind.config.js and postcss.config.js files.

npx tailwindcss init -p

Open your tailwind.config.js file and change the contents to the following:

module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  plugins: [],

Next, we need to import Tailwind CSS' styles in our index.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, check if your CSS file is being imported in your src/index.js (or src/index.ts when using TypeScript) file.