Tailwind is a utility-first CSS framework, which means that, unlike other CSS frameworks like Bootstrap or Materialize CSS, it doesn’t come with ready-made components. Instead, Tailwind CSS provides you with a set of CSS helper classes that allow you to quickly implement custom designs with ease, so you’re not stuck with using generic pre-built components.
With Tailwind, you can implement your custom designs comfortably with predefined CSS classes.
In this article, we’ll be taking a closer look at how to set up and start using Tailwind within your Svelte application. We’ll learn how to install the Tailwind library, initialize it, and use it to style our components.
To follow along, you should have a working knowledge of JavaScript and Svelte.
Installation
To create a Svelte app, first ensure you have Node.js installed on your computer. You can check by typing the following command into your terminal:
node -v
If it’s not already installed, simply go to the Node website to download the latest version.
Also, you’ll need to install the degit library so you can clone the Svelte template:
npm install -g degit
When that finishes, we can get started with our Svelte app by creating an empty folder and cloning the template into our project named tailwind
:
npx degit sveltejs/template tailwind
Then, we go to our project folder on the terminal:
cd tailwind
Now that we’ve set it up, we can install our project’s dependencies:
npm install
We then run the Svelte app with the following:
npm run dev
Installing Tailwind in a Svelte app
Now that our Svelte application is ready, we have to install Tailwind using the following command:
npm install [email protected]:@tailwindcss/postcss7-compat [email protected]^7 [email protected]^9 concurrently cross-env --save-dev
For most projects (and to take advantage of Tailwind’s customization features), you’ll want to install Tailwind and its peer-dependencies via npm. concurrently
allows us run multiple commands, which we will be using in our npm scripts later.
Because we’re not using the Tailwind CLI to integrate Tailwind into our project, and Tailwind CSS does not provide any vendor prefixing, Autoprefixer is recommended. Autoprefixer tracks caniuse.com to see which CSS properties need to be prefixed in order to ensure consistency across browsers.
PostCSS config
Next, we will manually create a PostCSS configuration file (postcss.config.js
) in our base directory.
Add the following lines of code to your file:
const tailwindcss = require('tailwindcss'); const autoprefixer = require("autoprefixer"); module.exports = { plugins: [ require("tailwindcss"), require("autoprefixer") ] }
PostCSS is necessary to lint our CSS, hence this configuration.
Tailwind config
Like the previous step, we will now manually create a Tailwind configuration file (tailwind.config.js
) in the base directory.
We can now set our own config options. Currently, the config file below uses purge
to remove every unused CSS in production:
const production = !process.env.ROLLUP_WATCH; module.exports = { future: { purgeLayersByDefault: true, removeDeprecatedGapUtilities: true, }, plugins: [ ], purge: { content: [ "./src/App.svelte", ], enabled: production // disable purge in dev }, };
Creating CSS files
Let’s now create our actual tailwind.css
and index.css
files within the public
folder.
In the tailwind.css
file, we’ll add these directives:
@tailwind base; @tailwind components; @tailwind utilities;
Still within our public
folder, we will navigate to our index.html
and import the index.css
inside our head
tag:
<link rel='stylesheet' href='/index.css'>
Now, go into our package.json
and use the following scripts
:
"scripts": { "watch:tailwind": "postcss public/tailwind.css -o public/index.css -w", "build:tailwind": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/index.css", "build": "npm run build:tailwind && rollup -c", "start": "sirv public", "serve": "serve public -p 80", "dev": "concurrently \"rollup -c -w\" \"npm run watch:tailwind\"" },
Now run:
npm run dev
We have successfully integrated Tailwind into our Svelte project!
We can confirm this by adding the following Tailwind classes to our App.svelte
file:
<main> <h1 class="py-8 px-4 border border-indigo-900 shadow-lg">Hello {name}!</h1> <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> </main>
You should now see this:
Building a photo gallery
Now, let’s use our newly-created CSS library to build a photo gallery. We’re going to clear the existing HTML in our App.svelte
and follow this guide to create a gallery like the one pictured here:
First, we’ll create a surrounding div:
<div class="container mx-auto border border-indigo-500 px-4"> </div>
The container
class sets the max-width
of our div
to the min-width
of the current breakpoint. This is useful if you’d prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport.
While mx-auto
centers the div
, border
creates a border, and border-indigo-500
adds border color and other styling details:
<div class="container mx-auto border border-indigo-500 px-4"> <h1 class="font-bold text-5xl">Photo Gallery</h1> </div>
We then add our “Photo Gallery” title in an h1
tag. The font-bold
helps increase the font-weight
to 700
and the text-5xl
sets the font-size to 3rem
.
Image section
There are two section
elements on the images above. The first section
contains two images, while the second section
contains six (three images per row):
<main> <div class="container mx-auto border border-indigo-500 px-4"> <h1 class="font-bold text-5xl">Photo Gallery</h1> <section class="py-8 px-4"> <div class="flex flex-wrap mx-4"> <div class="md:w-1/2 px-4 mb-8 md:mb-0"><img class="rounded shadow-md" src="https://source.unsplash.com/random/1280x720" alt=""></div> <div class="md:w-1/2 px-4 mb-8 md:mb-0"><img class="rounded shadow-md" src="https://source.unsplash.com/random/1280x720" alt=""></div> </div> </section> <section class="pt-8 px-4"> <div class="flex flex-wrap mx-4"> <div class="md:w-1/3 px-4 mb-8"><img class="rounded shadow-md" src="https://source.unsplash.com/random/1280x720" alt=""></div> <div class="md:w-1/3 px-4 mb-8"><img class="rounded shadow-md" src="https://source.unsplash.com/random/1280x720" alt=""></div> <div class="md:w-1/3 px-4 mb-8"><img class="rounded shadow-md" src="https://source.unsplash.com/random/1280x720" alt=""></div> <div class="md:w-1/3 px-4 mb-8"><img class="rounded shadow-md" src="https://source.unsplash.com/random/1280x720" alt=""></div> <div class="md:w-1/3 px-4 mb-8"><img class="rounded shadow-md" src="https://source.unsplash.com/random/1280x720" alt=""></div> <div class="md:w-1/3 px-4 mb-8"><img class="rounded shadow-md" src="https://source.unsplash.com/random/1280x720" alt=""></div> </div> </section> </div> </main>
The first section
has class py-8
that adds padding to the top and bottom, and px-4
for padding to the left and right.
Then, there is an inner, surrounding div
that contains Tailwind classes flex
, flex-wrap
, and mx-4
. These classes set the display to flex
, sets flex-wrap
to wrap
, and adds a margin
to the left and right.
For the images themselves, they are individually surrounded by a div
with Tailwind classes *class*="md:w-1/2 px-4 mb-8 md:mb-0"
. This determines the width of each image, which is 1/2
of the parent div
. It also styles the padding and margin.
The images themselves now have the rounded
class, which applies border radius sizes. shadow-md
adds box shadows to the element.
The second section
has the same styles. The only difference is that the immediate div
surrounding each image has the Tailwind class md:w-1/3
, which ensures the width of each image is 1/3
of the parent div
, making it three images per row.
Conclusion
A big congrats to you if you’ve made it this far. You have successfully learned how to set up your Svelte project and add beautiful styles with Tailwind. The repo with all of this code is on GitHub.
If you’d like to go further, add more CSS classes to make the photo gallery more beautiful. For instance, you can add more pages, components, and even transitions. The Tailwind documentation will show the correct classes for any style you hope to create:
Get setup with LogRocket's modern error tracking in minutes:
- Visit https://logrocket.com/signup/ to get an app ID.
- Install LogRocket via NPM or script tag.
LogRocket.init()
must be called client-side, not server-side. - (Optional) Install plugins for deeper integrations with your stack:
- Redux middleware
- ngrx middleware
- Vuex plugin
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
thank you, it worked!
Thanks, very well thought-out tutorial! Helped me a bunch!
Is there a way to use @apply in components style-section?
It works except when you want to use arbitrary values in for example grid sections:
1
2
This Tailwind/Svelte setup wont honor the “grid-cols-[200px_800px]” class. So far i’ve tried many starters, templates and tutorials. But the only one i’ve found that works, is one where it uses tailwindcss/jit with just in time compilation.