Back

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.

terminal
# 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.

terminal
cd my-cool-app
npm install

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

terminal
npm install -D tailwindcss postcss autoprefixer

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

terminal
npx tailwindcss init -p

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

tailwind.config.js
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.

index.css
@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.