Project Setup and Linking To Tailwind.css Questions

[chris-tietgen]

Hey, I'm new to Tailwind and frontend development in general and I was curious about how to setup a project for development.

In most tutorials on Tailwind, people create a src folder, which contains a css folder with Tailwind.css and then they run a build script which puts everything into a dist or public folder. This folder contains the "compiled" Tailwind.css file. They then add html files to the dist/public folder and link to the css/Tailwind.css file.

What is the point of the src folder? Does it only contain the uncompiled Tailwind.css file and all real development is done in dist/public?

Or should I write a build script like "build:dev" to compile the Tailwind.css file into src/css and then create all html files in src?

[estevanmaito]

It's a common folder organization, where you have crude code inside src and ready-for-production code inside dist.

Usually, you'll have some sort of script that will take your code inside src, pass it through some plugin, and put the new code inside dist.

In the example you mentioned, as the only piece of your code that needs this kind of transformation is the Tailwind file with the @tailwind rules, it seems a bit of overkill to have extra folders just for it, as your index.html doesn't need any special treatment (you're just writing what will appear in the browser).

Answering your question, for a small project (where you can count the files by hand), I would put everything in the same folder.

A recent project of mine, very similar to you description: https://github.com/estevanmaito/tailwindcss-multi-theme/tree/master/examples/simple

[chris-tietgen]

My project structure, so far, is shown below...

--src
|---Layout
|------layout-engine.js
|------pre-login.html
|------post-login.html
|---Account
|------login.html

If I open the Account/login.html file, it links to the Layout/layout-engine.js file, which determines if the pre-login.html or post-login.html layout should be used when displaying the login.html screen. It then takes the content from login.html and injects it into the appropriate layout.

This is allowing me to specify how each layout for a screen should look. For example, the pre-login layout is just a login form, whereas the post-login layout contains a Navbar and Sidebar. The layout html file includes the reference to the compiled Tailwind CSS.

My problem was that the layout html file in "dist/public" needs to reference "css/site.css" (compiled Tailwind) during development, but when working with html files in "src", it doesn't have access to the compiled Tailwind CSS.

What would be the best way to link to the compiled Tailwind CSS in both the development and prod release folders without trickery?

[estevanmaito]

Is there any difference between your development code and production code, apart from Tailwind's CSS?

If not, you should use one folder and always link the compiled CSS inside your HTML.

If you want to stick with your folder structure, you'll soon realize that you need a bundler (Parcel, Webpack, Rollup, etc.) just to output a different HTML file in dev/prod mode.

[chris-tietgen]

No, I guess the development code is really the same as the production code in this instance. May not always be in the future, but for now it is, so I can just stick with developing out of the dist folder.

Thanks!