Tailwind Example

Overview:

This repository provides a webpack/html tailwind starter project for concrete5 theme development. The project has been updated to version 2.1 of tailwind, using JIT, and to webpack 5. It now includes @tailwind/forms and @tailwind/typography, with @tailwind/ui removed. The project allows for easy building and development of concreteCMS themes.

Features:

• Tailwind Version 2.1 (JIT): The project uses the latest version of tailwind CSS, making it easy to create modern and responsive designs.
• Webpack 5 Integration: With webpack 5 integration, the project offers improved performance and faster builds.
• @tailwind/forms and @tailwind/typography: The project now includes these plugins, enabling the use of pre-styled form elements and typography.

Installation:

To install and use the tailwind starter project, follow these steps:

1. Clone the repository to your local machine.
2. Open the command line and navigate to the project directory.
3. Run npm install to install all the necessary dependencies.

To build the project, follow these steps:

1. Run npm run build to build the project. The dist directory will now contain all the relevant HTML and CSS files.
2. Run npm run build:dev to build the development assets. However, note that the file sizes in this mode are larger.

To build the project specifically for concreteCMS, follow these steps:

1. Run npm run build:c5 to build the project for concreteCMS. The dist/theme_name directory will now contain all the relevant php, css, and js files.

For development:

• To start the development server with automatic hot-reloading, run npm run dev. A web browser popup will appear, and the page will automatically reload whenever you save changes.
• Alternatively, you can run npm run watch which will auto-compile all the files whenever changes happen. This mode is useful if you are linking to CSS/JS files in other projects and don’t need hot-reloading.

Note: All output files are automatically generated in this version. When using SCSS files, simply add <link href='scss/filename.scss' rel='stylesheet'>. It will be automatically converted and compiled into <link href='assets/css/filename.css' rel='stylesheet'>. The index.js file is not required in your HTML files as it is already included.

Summary:

This repository provides a convenient webpack/html tailwind starter project for concrete5 theme development. It includes the latest version of tailwind CSS with JIT compilation, webpack 5 for improved performance, and additional plugins for styling form elements and typography. The project allows for easy building, development, and integration with concreteCMS.