Installation
Install Tailwind CSS with Qwik
Setting up Tailwind CSS in a Qwik project.
Create your project
Start by creating a new Qwik project if you don't have one set up already. The most common approach is to use Create Qwik.
Terminalnpm create qwik@latest my-projectcd my-project
Install Tailwind CSS
Install
tailwindcss
and its peer dependencies via npm, and then run the init command to generate bothtailwind.config.js
andpostcss.config.js
.Terminalnpm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p
Configure your template paths
Add the paths to all of your template files in your
tailwind.config.js
file.tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], theme: { extend: {}, }, plugins: [], }
Add the Tailwind directives to your CSS
Add the
@tailwind
directives for each of Tailwind’s layers to your./src/global.css
file.global.css@tailwind base; @tailwind components; @tailwind utilities;
Start your build process
Run your build process with
npm run dev
.Terminalnpm run dev
Start using Tailwind in your project
Start using Tailwind’s utility classes to style your content.
index.tsximport { component$ } from '@builder.io/qwik' export default component$(() => { return ( <h1 class="text-3xl font-bold underline"> Hello World! </h1> ) })