Tailwind CSS
Tailwind CSS is a utility-first CSS framework for rapidly building custom designs. It's a great choice for building modern and responsive web applications. We know, developers love Tailwind CSS, so Phenomine has built-in support for it. You can use Tailwind CSS in your Phenomine project without any additional configuration.
Prerequisites
Before you start using Tailwind CSS in your Phenomine project, make sure you have the following prerequisites installed:
- Node & NPM
- Tailwind CSS
If you don't have Node & NPM installed, you can download and install them from the official website. If you haven't installed Tailwind CSS yet, you can install it using the following command:
npm install -D tailwindcss
Installation
To install the dependencies, run the following command:
npm install
This command will install all the required dependencies, including Tailwind CSS.
Configuration
Phenomine Configuration
By default, you don't need to configure Tailwind CSS in your Phenomine project. Phenomine comes with a pre-configured Tailwind CSS setup. However, if you want to customize the Tailwind CSS configuration, you can change the config/app.php
file.
<?php
return [
...
'tailwindcss' => [
'source' => 'res/css/app.css',
'output' => 'public/build/css/app.css',
],
];
In the above configuration, you can change the source
and output
paths according to your project structure.
Tailwind CSS Configuration
If you want to customize the Tailwind CSS configuration, you can modify tailwind.config.js
file in the root directory of your project. You can use this file to customize the Tailwind CSS configuration.
import defaultTheme from 'tailwindcss/defaultTheme';
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./storage/framework/views/*.php',
'./res/views/**/*.latte.php',
],
theme: {
extend: {
fontFamily: {
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [],
};
Include Tailwind CSS
To include Tailwind CSS in your latte views, you can simply insert {tailwindcss}
at the top of your view file. Here is an example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<!-- Tailwind CSS -->
{tailwindcss}
</head>
<body>
</body>
</html>
Building Assets
To build the assets, run the following command:
php phenomine tailwindcss
This command will compile the Tailwind CSS and generate the CSS file that configured in the config/app.php
file. Or, if you want to watch the changes and build the assets automatically, you can run the following command:
php phenomine tailwindcss --watch
This command will watch the changes in your res/views
directory and build the assets automatically.
Tailwind CSS in Production
When you run php phenomine tailwindcss
, it will automatically determine the environment and build the assets accordingly. If you set the APP_ENV
to production
, it will build the assets minified and optimize for production.
That's it! You have successfully installed and configured Tailwind CSS in your Phenomine project. Now you can start building modern and responsive web applications using Tailwind CSS.