You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+7-34Lines changed: 7 additions & 34 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -104,49 +104,22 @@ The ordering does not matter. Classify will take care of that for you.
104
104
105
105
## Working With CSS Frameworks Like Tailwind CSS
106
106
107
-
Some CSS frameworks utilize JIT compiling, or have some other means of purging CSS classes from production builds to reduce file sizes. Classify provides a Laravel Artisan command to generate a JavaScript configuration file containing all Classify class names that can be used when configuring your CSS build process.
107
+
Some CSS frameworks utilize JIT compiling, or have some other means of purging CSS classes from production builds to reduce file sizes.
108
108
109
-
Running the following command from the root of the project:
110
-
111
-
```
112
-
php artisan classify:export
113
-
```
114
-
115
-
Would create a new (or update an existing) `classify.config.js` JavaScript file containing your Classify class name configuration:
109
+
Make sure to include your CSS classes as content, so TailwindCSS can include those in the compiled file. This is important, as your
110
+
classify CSS classes may not be in your template files, as they will be added dynamically.
116
111
117
112
```js
118
-
module.exports.classes= [
119
-
"mt-8",
120
-
"first:mt-0",
121
-
"text-xs",
122
-
"uppercase",
123
-
];
124
-
```
125
-
126
-
This configuration file can be used in conjunction with your CSS framework's build tools. For example, we can add our Classify class names to the Tailwind CSS 3 safe list ([https://tailwindcss.com/docs/content-configuration#safelisting-classes](https://tailwindcss.com/docs/content-configuration#safelisting-classes)):
127
-
128
-
Within `tailwind.config.js`:
129
-
130
-
```js
131
-
constclassify=require('./classify.config');
132
-
133
113
module.exports= {
134
114
content: [
135
-
'./pages/**/*.{html,js}'
136
-
'./components/**/*.{html,js}',
115
+
// all of your content files
116
+
// './pages/**/*.{html,js}'
117
+
// './components/**/*.{html,js}',
118
+
'./config/classify.php',
137
119
],
138
-
safelist: [
139
-
...classify.classes,
140
-
'bg-red-500',
141
-
'text-3xl',
142
-
'lg:text-4xl',
143
-
]
144
-
// ...
145
120
}
146
121
```
147
122
148
-
> **Important**: Remember to run the `php artisan classify:export` command after making these changes to your Tailwind CSS configuration file before you build your front-end assets!
0 commit comments