Installation
Setting up Tailwind CSS in a Parcel project.
Start by creating a new Parcel project if you don’t have one set up already. The most common approach is to add Parcel as a dev-dependency to your project as outlined in their getting started guide.
mkdir my-projectcd my-projectnpm init -ynpm install parcelmkdir srctouch src/index.html
Install @tailwindcss/postcss
and its peer dependencies via npm.
npm install tailwindcss @tailwindcss/postcss
Create a .postcssrc
file in your project root, and enable the @tailwindcss/postcss
plugin.
{ "plugins": { "@tailwindcss/postcss": {} }}
Create a ./src/index.css
file and add an @import
for Tailwind CSS.
@import "tailwindcss";
Run your build process with npx parcel src/index.html
.
npx parcel src/index.html
Add your CSS file to the <head>
and start using Tailwind’s utility classes to style your content.
<!doctype html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="./index.css" type="text/css" rel="stylesheet" /> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body></html>