Tailwind CSS Setup with Snowpack

After reading the official docs of tailwind to start the tailwind project with just create the file manually, it makes me wonder how to run this html simply at local server?

Actually you can click your html file but the things is the route will follow the folder project like this:

file:///Users/fatael/project%20sample/tailwind/Master%20File/src/index.html

and sometimes the assets file like javascript and css cannot read properly, even though it's not a big deal but i think it's not a good start to run the project as best practices. So here is my solution, let's go.

Snowpack

Snowpack is a web development tool. It is an alternative to traditional front-end build tools like webpack and Parcel. It aims to make front-end development more accessible and scalable by providing a simpler, more modern development experience.

with snowpack you can simply create your tailwindcss project with the builtin server, you can setup snowpack with 2 options:

1. Use createapp.dev site to generate the tailwindcss project, It's useful to start here because this is the most simple project set up tools.
2. using NPM

How to use

1.createapp.dev

1. Choose Snowpack
2. Choose the main library (if you want use tailwind css in original html file you can check "No Library" opt)
3. Check the UI Library with TailwindCSS
4. Choose the styling (by default it will be checked css and post css when you choose tailwind css)
5. Create a name for the project
6. Download

Or you can simply click this link to setup what we note above

After downloading the project from createapp.dev, you can extract the project and run this following command:

npm install

Please wait until the installation finish, and then run this following command to create initial config of tailwind:

npx tailwind init

It will generated the tailwind.config.js and set the file like this:

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Congratulation, you just started new project of tailwindcss.

2.NPM (Alternate Solution)

If someday createapp.dev no longer active because the developer forget to pay the domain extension, you can still create snowpack project with npm

Here is the step

1.Create a folder for your project, replace "myapp" with your project name

mkdir myapp

2.Go inside the folder

cd myapp

3.Initial the npm project

npm init -y

4.Install the snowpack config

npm install --save-dev snowpack postcss-cli postcss autoprefixer @snowpack/plugin-postcss

5.Install tailwindcss

npm install tailwindcss

After everything clear, you can start to create folders src and dist and create source code files and setup the tailwind.config.js like this

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

In the end, your folder structure project will be like this

YourProjectName
-node_modules
-src
  index.html
  styles.css
  index.js
package.json
snowpack.config.js
tailwind.config.js

And run your project to local server with

npm start

Compiling the project

After everything complete at the development stage, you can simply build your project for production by running this command

npm run build

it will generate the folder build and yup your project is ready to publish at production server