Neutral - Tailwind CSS Blog Template

Minimalism meets elegance in the "Neutral" blog template, meticulously crafted with Tailwind CSS and Alpine.js. Designed to streamline your development process while offering a visually appealing and functional starting point for your simple blog site needs.

Starting a Simple Blog Site: Whether you're a beginner exploring the world of web development or an experienced developer looking for a quick and efficient solution, "Neutral" offers the perfect foundation for launching your blog site with style and sophistication.

Tools & Setup

Neutral uses NPM scripts for its build system. Our package.json includes convenient methods for working with the framework, including compiling code, running tests, and more.

To use our build system and run our documentation locally, you'll need a copy of theme's source files and Node. Follow these steps and you should be ready to rock:

• Download and install Node.js, which we use to manage our dependencies.
• Run npm install --global gulp-cli command. If you already installed Gulp CLI previously, you can skip this step and jump to step 3.
• Navigate to the root neutral/ directory and run npm install.
• After Npm install complete, run npm run dev to start development.

Yup, that's it.

How to create a new style?

Most of the CSS uses the Tailwind CSS utility first, so you can edit it directly via the HTML file. To avoid file loss, overrides of your custom styles or any other conflicts during the upgrade process, create or modify your styles with add your custom css/tailwind/ in src/tailwind/tailwindcss.css file.

                  
                    @tailwind base;
                    @tailwind components;
                    @tailwind utilities;

                    // vendors css
                    // your custom css
                  
                

How to create a new Javascript?

Most of the Javascript uses the Alpine js, so you can edit it directly via the HTML file. To avoid file loss, overrides of your custom js or any other conflicts during the upgrade process, create or modify your custom javascript in src/js/script.js file.

                  
                    // Custom JS
                    const myCustom = function () {
                      
                      // insert your javascript in here

                    }